CODEWITHSUNDEEP
reactjswebpackeslintcreate-react-app
cham
cham

Reputation: 10772

Failed to compile create-react-app due to lint warnings after ejecting

I've been following a React course. The next step has been using npm run eject so that css modules can be used.

Since ejecting I can't use npm start. The page fails to compile. A long list of linting warnings appear (which actually appear to be from the webpack config files).

I have created a .eslintignore file for these and other files:

./reactNotes.jsx
./nodeTest.js
./config
./scripts

But neither my code editor (vs code) or webpack seems to notice this file. eslint is installed globally.

I have also investigated the webpack config for eslint with options like exclude:

  {
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
      {
        options: {
          formatter: eslintFormatter,
          eslintPath: require.resolve('eslint'),
        },
        loader: require.resolve('eslint-loader'),
      },
    ],
    include: paths.appSrc,
    exclude: /config/
  }

VS Code has eslint enabled in my user settings.

How can I set up webpack (and maybe even vs code) to ignore directories and files?

update: here is .eslintrc:

{
    "parser": "babel-eslint",
    "extends": "react-app",
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ],
    "rules": {
        "linebreak-style": [
            "error",
            "windows"
        ],
        "indent": [
            "error",
            4
        ],
        "react/prop-types": 0,
        "react/jsx-indent": 0,
        "jsx-a11y/click-events-have-key-events": 0,
        "jsx-a11y/no-noninteractive-element-interactions": 0,
        "max-len": 0,
        "arrow-body-style": 0,
        "react/jsx-indent-props": 0,
        "react/no-unescaped-entities": 0,
        "react/jsx-no-bind": 0,
        "arrow-parens": 0,
        "react/no-array-index-key": 0
    }
}

Also npm install and restarting the browser do not work.

browser errors

Upvotes: 7

Views: 9394

Answers (3)

Sameerk129
Sameerk129

Reputation: 31

Create-react-app uses eslint internally for linting and doesn't run when that eslint check throws an error, if you have configured eslint separately(using config .eslintrc.js) and have then ejected, it starts using that eslint config that you have configued. The problem that i was facing is that, while using debugger, it wont start and throws an exception of no-debugger rule. So, i created a separate eslint config, and named it test.eslintrc.js, and in my package.json i did: "lint": "eslint src -c test.eslintrc.js", inside "scripts" tag

Also you can use .eslintignore and add directories: config/ scripts/ src/serviceWorker.js

Upvotes: 2

cham
cham

Reputation: 10772

loveky's answer fixes up VS code.

To fix the build add in an an exclude property to webpack.config that includes the service worker file:

  {
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
      {
        options: {
          formatter: eslintFormatter,
          eslintPath: require.resolve('eslint'),
          emitError: false,
        },
        loader: require.resolve('eslint-loader'),
      },
    ],
    include: paths.appSrc,
    exclude: /(config|node_modules|registerServiceWorker.js|nodeTest.js|reactNotes.jsx|webpack.config)/,
  }

Upvotes: 1

loveky
loveky

Reputation: 1012

in your eslintigonre, try change

./config
./scripts

to

config/
scripts/

In ESLint's doc, it stats:

Ignore patterns behave according to the .gitignore specification

You can find the full specification here

Upvotes: 2

Related Questions