2

I watched a React.js tutorial and followed through every step, but it seems like I can't even get the first step right. The tutorial is here around the 16:10 mark.

The instructions told me to download node.js / npm (my version is 6.13.4), and then run npm create-react-app (app name here). I did it, and then right away tries to run npm start. The tutorial had no trouble doing so, but when I did it, it gave me this error:

Failed to compile.

./src/index.js 1:57
Module parse failed: Unexpected token (1:57)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> $RefreshRuntime$ = require('C:/Users/Jack/Documents/Jack's Workshop/Coding/react/amogus2/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);

Forgive me for my ignorance, but I have no idea where to start looking for this error, because I have not done a single thing to modify the template automatically given to me through create-react-app.

I tried looking around online for solutions, and found a thing I'm supposed to have called "webpack.config.js", yet it is neither in the root file nor in the ./src file. I searched for the name in the entire project and found several types of this config file. I thought the most probably one is in node_modules/react-scripts/config/webpack.config.js.

What do I do to get rid of this error? Thanks in advance!

Aike
  • 17
  • 1
  • 4
  • Yes, that is a webpack error telling you it doesn't have a loader (https://webpack.js.org/loaders/) setup to handle a certain file type. create-react-app hides the webpack.config.js file unless you "eject" (https://create-react-app.dev/docs/available-scripts#npm-run-eject) your app, which you probably don't want to do if you just want to follow the tutorial. – lurvey Feb 19 '21 at 03:19
  • delete node_modules folder , package-lock.json and type ***npm install** – Akhil Feb 19 '21 at 04:09
  • 1
    @akhilchoudhary hey hey hey! Thanks for the reply. Do you know why I don't have the required loaders, while the person in the tutorial does? I can provide some information if needed and, I've tried your advice, yet the error still lingers, it seems. – Aike Feb 19 '21 at 05:01
  • Same thing just happened to me. I'm using this: https://www.leveluptutorials.com/tutorials/react-for-everyone/getting-started – Jeannie Feb 19 '21 at 05:22
  • Add this dependencies in your projects [https://github.com/bradtraversy/react-crash-2021/blob/master/package.json](https://github.com/bradtraversy/react-crash-2021/blob/master/package.json) or just copy paste package.json file in your project and npm install – Akhil Feb 19 '21 at 06:10

3 Answers3

3

change "react-scripts": "4.0.3" to "react-scripts": "4.0.1" in package.json

Ref: https://github.com/facebook/create-react-app/issues/10518#issuecomment-775476713

finiteEffort
  • 117
  • 1
  • 4
1

Scrolling through the link posted by @finiteEffort, I came across this comment:

@fabiangamboa95 This is only a guess, but I see that the path with aws's has a single quote in it.

#10964 also has a single quote in the path with a similar error.

So run pwd in the root folder of your app. If the path contains a single quote, then you will get this error in > 4.0.1 until the team fixes the issue.

Nick Manning
  • 2,828
  • 1
  • 29
  • 50
-6

FIXED! Thanks to mister akhil choudhary.

The fix was to replace the given package.json file with this, and you're good to go!

Aike
  • 17
  • 1
  • 4
  • This worked for me, too. I grabbed the `package.json` file from the tutorial I was working through and re-ran `npm install`. – Jeannie Feb 24 '21 at 03:55
  • 1
    Indicate the exact changes you made to your package.json. Everyone has a different set of JS packages and your "this" link is too general can not be copied. – Nafiu Lawal Jun 10 '21 at 20:08
  • I agree with @NafiuLawal Please mention the changes. – Daman Arora Jun 15 '21 at 17:12