create-react-app eslint issue due to higher level folder containing another app with node_modules in it

user_125032 0
Viewed 1225

I have a git repository which has 2 projects in it, a loopback app (named app), and a react app created with create-react-app (named client). And the directory structure is as follows;

├─┬app
│ ├──node_modules
│ ├─┬client
    ├─node_modules

the loopback project (app) uses eslint, has eslint in devDependencies, client does not have eslint in package.json.

Client app is created with create-react-app, so when I run react-scripts, it finds eslint in the upper directory, and complains about its version, if I delete the app\node_modules everything works fine.

So how does react-scripts find the eslint in upper directory, is there a way of telling it not to check any other node_modules folder, it should only check in the current folder.

react-scripts tells me that I can put SKIP_PREFLIGHT_CHECK=true in my .env file, is it safe to do this, does it run the eslint 3.x on the upper level folder, or does it run the required 5.6.0 version installed in client\node_modules folder?

I will setup a deployment toolchain for this project so I need make sure that it works fine all the time. EDIT: The config entry in my client\package.json

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

EDIT2: Steps to reproduce problems: my node version is: 8.11.3

npx loopback-cli app (accept default options when prompted)
cd app
npm i
npx create-react-app client
cd client
npm i
npm run start (you should see the errors after this)

EDIT3: I ended up ejecting react-scripts.

npm reactjs node.js
1 Answers

Try creating a .eslintrc file in your client folder, include the following content:

.eslintrc

{
  "extends": "react-app"
}

Alternatively, this should work according to the docs:

{
    "root": true
}

By default, ESLint will look for configuration files in all parent folders up to the root directory. This can be useful if you want all of your projects to follow a certain convention, but can sometimes lead to unexpected results. To limit ESLint to a specific project, place "root": true inside the eslintConfig field of the package.json file or in the .eslintrc.* file at your project’s root level. ESLint will stop looking in parent folders once it finds a configuration with "root": true.

user_19482110
Related