React npm start failing on out of the box code.

[Ewager1]

Describe the bug

(Write your answer here.)
create-react-app app name builds the app. However. However, npm start fails out of the box. By this, I mean I haven't touched any of the codebase. I've been using Vs code. I have tried uninstalling and reinstalling node_modules, creating completely new react apps, and using different browsers. I tried updating my nodejs and my npm, and have tried npm install.

I always get the following error. Note, There aren't 43 columns in line one of index.Js, so i'm not even sure what its referring to.
Failed to compile.

./src/index.js 1:43
Module parse failed: Unexpected token (1:43)
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/Ethan's PC/Desktop/react Test/try-this/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);
|

Did you try recovering your dependencies?

yes, multiple times.

(Write your answer here.)
npm 7.5.6 I have followed all of the steps.

Which terms did you search for in User Guide?

(Write your answer here if relevant.)
pasted the error. Also tried "react fails to compile on innitial load" and "react module parse error on initial load"

Environment

Environment Info:

current version of create-react-app: 4.0.3
running from C:\Users\Ethan's PC\AppData\Roaming\npm\node_modules\create-react-app

System:
OS: Windows 10 10.0.19042
CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
Binaries:
Node: 14.15.5 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 7.5.6 - ~\AppData\Roaming\npm\npm.CMD
Browsers:
Chrome: 85.0.4183.102
Edge: Spartan (44.19041.423.0), Chromium (88.0.705.74)
Internet Explorer: 11.0.19041.1
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.3 => 4.0.3
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. npx create-react-app appName
2. npm start
3. and it fails! : )

Expected behavior

It should have opened React in a browser.

Actual behavior

A browser DOES open, but it is just a blank page with a copy of the error.

Reproducible demo

I would but there is nothing to send. It's a basic level issue. As a student in school for programming, I'm having to build all of my
React projects in codeSandbox and it's been challenging. Please let me know if you have any insight!

[burntcarrot]

Experienced the same issue; tried reinstalling npm, npx and removed any global installations of create-react-app. Nothing worked.

Solution 1:
I suggest you to try running:
npx create-react-app@latest my-app

Solution 2:
If the above command doesn't resolve your issue, do the following steps:

• Navigate to your current project directory
• Open package.json
• Change the version of react-scripts from 4.0.3 to 4.0.1. Save the file.
• Now, run npm install in your current project directory.

If these workarounds didn't fix this, you might want to check the workarounds suggested in #10601.

[iastanley]

Experiencing the exact same issue.

System:
OS: MacOS 10.15.7
CPU: 2.8 GHz Quad-Core Intel Core i7
Binaries:
Node: 14.15.5
npm: 6.14.11
Browsers:
Chrome: Version 88.0.4324.192 (Official Build) (x86_64)
npmPackages:
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",

global create-react-app has been uninstalled.

Just trying to get the initial create-react-app to start - no modifications made. No matter what I do I get this error every time:

./src/index.js 1:59
Module parse failed: Unexpected token (1:59)
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('/Users/<username>/Documents/Programming/react-tictactoe-tutorial/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);
|

[iastanley]

Experienced the same issue; tried reinstalling npm, npx and removed any global installations of create-react-app. Nothing worked.

Solution 1:
I suggest you to try running:
npx create-react-app@latest my-app

Solution 2:
If the above command doesn't resolve your issue, do the following steps:

• Navigate to your current project directory
• Open package.json
• Change the version of react-scripts from 4.0.3 to 4.0.1. Save the file.
• Now, run npm install in your current project directory.

If these workarounds didn't fix this, you might want to check the workarounds suggested in #10601.

Reverting react-scripts to version 4.0.1 and rerunning npm-install (Solution 2 above) resolved the issue for me.

[Ewager1]

Going back from 4.03 to 4.01 in scripts worked. Thank you @iastanley