Odyssey Lift-off I: "Module parse failed: Unexpected token" Error

Help
1

Hello,

I am on the “useQuery hook” step attempting to implement the grid. Here is my code that I think is problematic:

const Tracks = () => {
  const { loading, error, data } = useQuery(TRACKS);

  return (
    <Layout grid>
      <QueryResult error={error} loading={loading} data={data}>
        {data?.tracksForHome?.map((track, index) => (
          <TrackCard key={track.id} track={track} />
        ))}
      </QueryResult>
    </Layout>
  );
};

I am receiving this error message:

Failed to compile.

./src/pages/tracks.js 43:10
Module parse failed: Unexpected token (43:10)
You may need an appropriate loader to handle this file type.
| columnNumber: 7
| }

}, data?.tracksForHome?.map(function (track, index) {
| return /#PURE/React.createElement(TrackCard, {
| key: track.id,

I don’t receive any issues when I perform the prior step, which is:

return <Layout grid>{JSON.stringify(data)}</Layout>;

How can I resolve this? Thank you!

2

Hello @michelletaing

Looks like webpack is unhappy for some reason.
Could be a few things, I’d recommend first checking for any potential trailing character at the end of the file that could have been typed by error (line 43 is passed the end of the component in the final client repo for track.js for example)
if that’s not the problem then we’d need a bit more info:
have you started from the repo shared in the course or from a blank project?
would you be able to link to your repo? It’ll be easier to understand what might be wrong with more context.

Best,
Raph

3

Hi @Raph!

I checked for trailing characters in the track.js file and I don’t believe I spotted any. I started from the repo shared in the course (not a blank project).

Here is my repo: GitHub - michelletaing/Odyssey-Lift-Off-I

Thank you for the help!

4

Thanks for sharing your repo.
I found that your project is using an old version of react-scripts (^2.1.3) (this package is used by the create-react-app utility) and that version does not support optional chaining (support started at 3.3.0, hence breaking on that line in tracks.js:

{data?.tracksForHome?.map((track, index) => (

updating react-script to a newer version (in the original repo it’s ^4.0.3, but now the latest is 5.0.1) should fix your issue.

5

Thanks for your help.

I believe this happened because earlier I was experiencing issues installing react. I would receive a number of vulnerabilities, so I ran npm audit fix --force (which I believe installed older versions) to resolve the critical issues. I also experienced this on the server side when I would perform npm install, but I have not run into further problems since.

I tried updating react using:

npm install react@latest react-dom@latest
npm install react-scripts

but I run into a number of warnings and errors for both commands:

Screen Shot 2022-06-29 at 2.41.08 PM
Screen Shot 2022-06-29 at 2.41.08 PM765×702 99.8 KB

Screen Shot 2022-06-29 at 2.41.31 PM
Screen Shot 2022-06-29 at 2.41.31 PM945×177 36.9 KB

I am still encountering the compiler error.

A lot of this is completely new to me - thank you for your patience!

6

Hello @michelletaing

More than happy to help, I’ve been there too!

running react@latest installed react 18 which is pretty recent and not compatible with some other packages we use in the project.

To solve your problem, the simplest way would be to replace your package.json with the one from final/client (then npm install after that).
(Or you can also manually revert the react and react-dom packages version to the original ones in your current package.json:

    "react": "^16.13.1",
    "react-dom": "^16.13.1",

then npm install.)

Hope this helps!

Best,
Raph

7

I replaced my package.json with the one from final/client and ran npm install and I see these messages:

Screen Shot 2022-06-30 at 2.16.00 PM
Screen Shot 2022-06-30 at 2.16.00 PM1920×533 106 KB

Not sure if I did something else wrong… :frowning: I’ve updated my repo with these changes in case it’s helpful to see that.

And just as a general question - if I see messages like this (view below) when doing npm install, should I address the issues or leave them alone?
Screen Shot 2022-06-30 at 2.59.18 PM

8

I was able to run your client app from your repo without issues, that means it might be your local project and its dependencies that are making problems.

You could try to delete the node_modules folder and then reinstall packages.
in your terminal, in the client directory, run:
rm -r node_modules/
then
npm install

Hope that fixes it!

9

In order to solve this error Either You need to downgrade the babel/core packages Or you need to downgrade the babel packages will fix your error. You can Read More about It At Here