-1

Please, someone help me with this Error:

enter image description here

I used npm to create the React app. I can not use npx create-react-app, because is takes more than 40 min to create the app even with high speed internet.

node - v14.17.3

npm - 7.20.0

browser - Google

here is the error from launched page.

Failed to compile ./src/index.js 1:35 Module parse failed: Unexpected token (1:35) 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('D:/LET'S LEARN SOMETHING/CODING/HTML_CSS_JAVASCRIPT/REACT-WORKING/react-test/node_modules/react-refresh/runtime.js'); | $RefreshSetup$(module.id);

enter image description here

Aziza Kasenova
  • 1,501
  • 2
  • 10
  • 22
log2
  • 1
  • 3
  • is the code that is failing yours? that `|` looks out of place - perhaps if you could show the first couple of lines of **your** `index.js` – Bravo Jul 22 '21 at 06:31
  • If you can't/won't use npx you need to `npm install -g create-react-app` then `create-react-app my-app`. (you might have to restart the terminal window in between these two commands). The command you used seems weird, usually it's `npm init` or `npm init -y` in an existing folder, and neither is specific to React. It's just a way to generate package.json so you can start installing modules. Where did you get `npm init react-app my-app` from? –  Jul 22 '21 at 06:34
  • @Bravo , I added the index.js file Image. Please take look. – log2 Jul 22 '21 at 08:24
  • @ChrisG , I got it from here https://create-react-app.dev/docs/getting-started/ I installed create-react-app globally and I tried creating the app using create-react-app app-name. But even after more than 40min it still downloading/installing. create-react-app creates more than 30000 files in my project folder. Please help me why it is taking too long and even it is not completing the initial setups. Please note, there is no problem with the internet speed. – log2 Jul 22 '21 at 08:29
  • I see, I didn't now about npm initializers. Anyway, I just tried the npx version and it finished after 1 minutes and 42 seconds. That huge number of files is normal, it's due to tons of modules being installed, each with their own dependencies. My first suggestion would be to try and turn off your antivirus and see if that changes anything. –  Jul 22 '21 at 09:12

2 Answers2

0

Possibly problem with file path - D:/LET'S LEARN SOMETHING/

Change it to something without spaces and special characters like D:/let_learn_something/

Aleksandr Smyshliaev
  • 558
  • 2
  • 8
  • I was using the same folder for my previous react apps. there were no problem at the time. But this issue starts one month before, when i try to create a new app as usual using create-react-app. I confirm there are multiple react apps in the same folder which i created long before and all are running from vs-code without a problem. The problem is i am unable to create new apps regardless of the folder location. – log2 Jul 22 '21 at 08:40
  • Can try to remove and reinstall CRA. Also can try to open task manager when you creating new CRA app and look, maybe defender/antivirus blocking it. – Aleksandr Smyshliaev Jul 22 '21 at 08:45
  • where exactly I should look in the task manager. – log2 Jul 22 '21 at 08:55
  • Any suspicious process that eating CPU when you creating app. – Aleksandr Smyshliaev Jul 22 '21 at 08:58
  • Of course, My Node.js javascript runtime process showing high CPU usage. Apart from that everything is normal. And my antivirus is not running while I create the app. Can you tell me how much time does it take to create a React app using npx usually. Mine is running for the past 20 min and it is still showing installing in the console. – log2 Jul 22 '21 at 09:08
  • Took me less than minute to create app. Looks like something wrong with your PC, e.g. antivirus, no hard disk space, problem with internet connection. – Aleksandr Smyshliaev Jul 22 '21 at 09:19
  • ./src/index.js 1:35 Module parse failed: Unexpected token (1:35) 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('D:/LET'S LEARN SOMETHING/CODING/HTML_CSS_JAVASCRIPT/REACT-WORKING/test-1/myapp/node_modules/react-refresh/runtime.js'); | $RefreshSetup$(module.id); This is my problem. when the app launches , the browser shows this message – log2 Jul 22 '21 at 09:34
0

I think I found the problem. The "react-scripts": "^4.0.3" is the issue. Somehow create-react-app is breaking with react-scripts(4.0.3). Once I downgraded to 4.0.1, the app launched successfully. As far as I can see, the latest version of react-scripts which is 4.0.3 does not support create-react-app launch.

log2
  • 1
  • 3