I have been using React Native for a while but figured I would try out React on the web. So I followed this guide: https://reactjs.org/docs/create-a-new-react-app.html but after using npx create-react-app react-try
, navigating to the new folder, and typing yarn start
I get this error message:
Failed to compile.
./src/index.js 1:60
Module parse failed: Unexpected token (1:60)
File was processed with these loaders:
* ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> $RefreshRuntime$ = require('C:/Users/e096752/Documents/Cole's Git Repos/react-try/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);
This is everything that was included with the create method: Project
Package.json
{
"name": "react-try",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
If there is any other info you need please let me know. What in the world do I need to do?
There appears to be a problem with
react-scripts 4.0.2.
A workaround is to change version manually to 4.0.1 on package.json then run yarn install
.
That will do!
this problem happened for me because of the single quotation in the folder name, removing it solved the issue.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With