Mixing
create-react-app eslint issue due to higher level folder containing another app with node_modules in it
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 appnode_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 clientnode_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 clientpackage.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.
node.js reactjs npm
asked Jan 2 at 16:14
hazimdikenlihazimdikenli
2,98872958
add a comment |
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 appnode_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 clientnode_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 clientpackage.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.
node.js reactjs npm
asked Jan 2 at 16:14
hazimdikenlihazimdikenli
2,98872958
add a comment |
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 appnode_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 clientnode_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 clientpackage.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.
node.js reactjs npm
asked Jan 2 at 16:14
hazimdikenlihazimdikenli
2,98872958
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 appnode_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 clientnode_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 clientpackage.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.
node.js reactjs npm
node.js reactjs npm
asked Jan 2 at 16:14
hazimdikenlihazimdikenli
2,98872958
asked Jan 2 at 16:14
hazimdikenlihazimdikenli
2,98872958
edited Jan 9 at 6:24
hazimdikenli
asked Jan 2 at 16:14
hazimdikenlihazimdikenli
2,98872958
asked Jan 2 at 16:14
hazimdikenlihazimdikenli
2,98872958
asked Jan 2 at 16:14
hazimdikenlihazimdikenli
2,98872958
2,98872958
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Jan 2 at 16:16
dschudschu
2,39821936
thanks @dschu, but it did not help.
– hazimdikenli
Jan 2 at 16:32
"eslintConfig": { "extends": "react-app", "root": true }, I tried this also.
– hazimdikenli
Jan 2 at 16:37
When are these errors shown? Inside your IDE or while running npm run start inside client?
– dschu
Jan 2 at 16:52
shown as the output of the react-scripts like build, test, run etc.
– hazimdikenli
Jan 3 at 5:49
@hazimdikenli Could you provide a reproducible example? I'd try to debug this then
– dschu
Jan 3 at 12:10
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009617%2fcreate-react-app-eslint-issue-due-to-higher-level-folder-containing-another-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Jan 2 at 16:16
dschudschu
2,39821936
thanks @dschu, but it did not help.
– hazimdikenli
Jan 2 at 16:32
"eslintConfig": { "extends": "react-app", "root": true }, I tried this also.
– hazimdikenli
Jan 2 at 16:37
When are these errors shown? Inside your IDE or while running npm run start inside client?
– dschu
Jan 2 at 16:52
shown as the output of the react-scripts like build, test, run etc.
– hazimdikenli
Jan 3 at 5:49
@hazimdikenli Could you provide a reproducible example? I'd try to debug this then
– dschu
Jan 3 at 12:10
add a comment |
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.
answered Jan 2 at 16:16
dschudschu
2,39821936
thanks @dschu, but it did not help.
– hazimdikenli
Jan 2 at 16:32
"eslintConfig": { "extends": "react-app", "root": true }, I tried this also.
– hazimdikenli
Jan 2 at 16:37
When are these errors shown? Inside your IDE or while running npm run start inside client?
– dschu
Jan 2 at 16:52
shown as the output of the react-scripts like build, test, run etc.
– hazimdikenli
Jan 3 at 5:49
@hazimdikenli Could you provide a reproducible example? I'd try to debug this then
– dschu
Jan 3 at 12:10
add a comment |
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.
answered Jan 2 at 16:16
dschudschu
2,39821936
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.
answered Jan 2 at 16:16
dschudschu
2,39821936
answered Jan 2 at 16:16
dschudschu
2,39821936
answered Jan 2 at 16:16
dschudschu
2,39821936
answered Jan 2 at 16:16
dschudschu
2,39821936
2,39821936
thanks @dschu, but it did not help.
– hazimdikenli
Jan 2 at 16:32
"eslintConfig": { "extends": "react-app", "root": true }, I tried this also.
– hazimdikenli
Jan 2 at 16:37
When are these errors shown? Inside your IDE or while running npm run start inside client?
– dschu
Jan 2 at 16:52
shown as the output of the react-scripts like build, test, run etc.
– hazimdikenli
Jan 3 at 5:49
@hazimdikenli Could you provide a reproducible example? I'd try to debug this then
– dschu
Jan 3 at 12:10
add a comment |
thanks @dschu, but it did not help.
– hazimdikenli
Jan 2 at 16:32
"eslintConfig": { "extends": "react-app", "root": true }, I tried this also.
– hazimdikenli
Jan 2 at 16:37
When are these errors shown? Inside your IDE or while running npm run start inside client?
– dschu
Jan 2 at 16:52
shown as the output of the react-scripts like build, test, run etc.
– hazimdikenli
Jan 3 at 5:49
@hazimdikenli Could you provide a reproducible example? I'd try to debug this then
– dschu
Jan 3 at 12:10
thanks @dschu, but it did not help.
– hazimdikenli
Jan 2 at 16:32
thanks @dschu, but it did not help.
– hazimdikenli
Jan 2 at 16:32
"eslintConfig": { "extends": "react-app", "root": true }, I tried this also.
– hazimdikenli
Jan 2 at 16:37
"eslintConfig": { "extends": "react-app", "root": true }, I tried this also.
– hazimdikenli
Jan 2 at 16:37
When are these errors shown? Inside your IDE or while running npm run start inside client?
– dschu
Jan 2 at 16:52
When are these errors shown? Inside your IDE or while running npm run start inside client?
– dschu
Jan 2 at 16:52
shown as the output of the react-scripts like build, test, run etc.
– hazimdikenli
Jan 3 at 5:49
shown as the output of the react-scripts like build, test, run etc.
– hazimdikenli
Jan 3 at 5:49
@hazimdikenli Could you provide a reproducible example? I'd try to debug this then
– dschu
Jan 3 at 12:10
@hazimdikenli Could you provide a reproducible example? I'd try to debug this then
– dschu
Jan 3 at 12:10
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009617%2fcreate-react-app-eslint-issue-due-to-higher-level-folder-containing-another-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
