MicrosoftDocs / mslearn-staticwebapp

Static Web App template repository
MIT License
80 stars 103 forks source link

React tutorial fails with ESLint error: failed to load `babel-eslint` parser #127

Open victorlin opened 1 year ago

victorlin commented 1 year ago

I just followed the tutorial, and it failed on Unit 4/5: Create an Azure Static Web App. The failure is visible on the automatically generated workflow run here.

It can also be reproduced locally:

  1. Clone this repo
  2. cd react-app
  3. npm install
  4. npm run build
  5. Observe error:
> react-app@0.1.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.

[eslint] Failed to load parser 'react-scripts/node_modules/babel-eslint' declared in '.eslintrc.json': Cannot find module 'react-scripts/node_modules/babel-eslint'
Require stack:
- /Users/victor/repos/victorlin/my-static-web-app/react-app/.eslintrc.json
sneha774 commented 1 year ago

2 more issues with react tutorial as of now- Module not found: Error: Can't resolve 'react-router' in 'C:\Snehal\static-webapp-and-api\static-web-app\react-app\src' ERROR in ./src/App.js 12:0-42 Module not found: Error: Can't resolve 'react-router' in 'C:\Snehal\static-webapp-and-api\static-web-app\react-app\src'

ERROR in ./src/products/ProductList.js 5:0-42 Module not found: Error: Can't resolve 'react-router' in 'C:\Snehal\static-webapp-and-api\static-web-app\react-app\src\products'

Can be fixed by importing 'withRouter' from 'react-router-dom' instead of 'react-router'

omgLois commented 1 year ago

I installed eslint in the root of the application folder (src) by using npm install eslint and then I removed the following from the package.json

"eslintConfig": {
    "extends": "react-app"
  },

then reran npm install followed by npm run build

this has solved the issue for me.