How do I fix the error, "Unexpected token (1:61)" in React?

Viewed 945

I am trying to learn react and I have a problem. In Visual Studio Code, in the terminal, I first entered npx create-react-app . then npm start and this error appeared:

Module parse failed: Unexpected token (1:61)
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:/MY DIRECTORY TO THIS PROJECT/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);

I have looked all over for an answer to this problem, however nothing I found worked. I did try to add the

$RefreshRuntime$ = require('C:/MY DIRECTORY TO THIS PROJECT/node_modules/react-refresh/runtime.js');
$RefreshSetup$(module.id);

to my index.js file but the same error occurred.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Thanks so much for any help! :)

3 Answers

This particular issue is apparently a bug with the newest version of react-scripts. According to the linked comment, downgrading to 4.0.1 will help:

Update - I went into the package.json and changed the react-scripts to 4.0.1 and re-ran npm install and it fixed the issue.

I had already that problem with react, but you can fix it. At first open

package.json

and change react-scripts to 4.01, after that open up terminal and type npm install. it will fix.

Related