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

create-react-app eslint without eject
create-react-app disable eslint
create react-app eslint airbnb
create react-app babel-eslint
create react app remove lint
react-scripts lint
create react-app eslint --fix
install eslint config react app

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.

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

disable eslint · Issue #2157 · facebook/create-react-app · GitHub, At Khan Academy we're using Create React App for prototyping. These files work perfectly, but fail a bunch of lint checks; specifically, These warnings bury any user-specified logging, errors thrown, etc. I'll just eject and remove the linter, but I had to let you know since you say you Failed to compile. It seems like this is a yarn issue as much as a create-react-app one. I am also seeing something similar. Not exactly the same, because if you fix one of these errors and run yarn start or yarn run build again, you most likely get some more errors to fix. It goes on and on, based on some default settings that eslint seems to be incorrectly using.

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)/,
  }

Use custom ESLint config in create-react-app using 3 simple steps , 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). Create React App won’t modify your source files by itself. lock bot locked and limited conversation to collaborators Jan 22, 2019 Sign up for free to subscribe to this conversation on GitHub .

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

[Solved]create react app Support ESLint configure or disabling , They want the browser to fail/warn only when lint violations happen, not when your code style is not matching the convention set by your team. Hi, I'm trying to run the Hello Mobile Example for a new create-react-app with react-native-web installed but I'm getting the following error: Failed to compile.

Create Apps with No Configuration – React Blog, Solvedcreate react app Support ESLint configure or disabling ESLint Currently the only option to really control the configuration of ESLint is by eject or by fork. But you can't configure, so warnings / errors in the browser will be leave you with Not being able to define a custom "lint" script to check for rules on CI jobs,  Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

How to setup ESLint and Prettier for your React apps, Create React App is a new officially supported way to create failed to compile. ESLint is also integrated so lint warnings are displayed right in the console: We only picked a small subset of lint rules that often lead to bugs. “Ejecting” lets you leave the comfort of Create React App setup at any time. I'm using create-react-app and am running node v8.6.0. Webpack and babel are already pre-packaged with create-react-app. In their documentation it says: Converting to a Custom Setup. If you’re a power user and you aren’t happy with the default configuration, you can “eject” from the tool and use it as a boilerplate generator.

Linting React Using ESLint with Create React App ← Alligator.io, Because you can build an app while writing awful code. trigger warning or errors to let you know if your code is right or wrong. As an example, eslint-​plugin-react contains many rules related to React. it will fail because we haven'​t specified the configuration for lint-staged "eject": "react-scripts eject". Create React App: Linting all the things Jun 11, 2017 A linter is a tool that goes through our code and identifies potential problems before we’ve even had the chance to run it.