问题
I've created a basic React web app with create-react-app
and it has the following structure after ejecting. Works just fine.
intended-app-home
|- the-app
|- config
|- node_modules
|- public
|- scripts
|- src
|- package.json
|- .eslintignore
|- .eslintrc
|- .gitignore
Now, I want to move the contents of the-app
up a level, to the folder intended-app-home
. When I do this, I get the following error when running npm start
:
Failed to compile.
Error in ./src/index.js
1:1 error Parsing error: 'import' and 'export' may appear only with 'sourceType: module'
✖ 1 problem (1 error, 0 warnings)
Error in ./src/components/Blah.js
1:1 error Parsing error: 'import' and 'export' may appear only with 'sourceType: module'
What am I missing? Is it not safe to assume that the app folder is portable?
Here are my .eslintrc
contents:
{
"extends": "eslint:recommended",
"env": {
"browser": true,
"commonjs": true,
"node": true,
"es6": true
},
"parserOptions": {
"ecmaVersion": 6
},
"rules": {
"no-console": "off",
"strict": ["error", "global"]
}
}
回答1:
You have to add the following to your .eslintrc
as the error suggest:
"parserOptions": {
"sourceType": "module"
}
Per the ESLint documentation:
sourceType
- set to"script"
(default) or"module"
if your code is in ECMAScript modules.
The thing is, in ECMAScript 2015, there are things such as scripts and modules. Scripts are just plain JavaScript files. Modules, on the other hand, are scripts that export data and/or import other modules. So, if you want to use import
or export
, you have to specify "sourceType": "module"
so that ESLint can correctly parse your module code with Espree and lint it.
Now onto why the error only happens when you move the-app
contents up one level. By default, Create React App uses the following ESLint configuration for its projects, specified in package.json
:
"eslintConfig": {
"extends": "react-app"
}
So the ESLint configuration just extends the React App configuration. And if you look at the source for eslint-config-react-app, in index.js:
parserOptions: { ecmaVersion: 6, sourceType: 'module', ecmaFeatures: { jsx: true, generators: true, experimentalObjectRestSpread: true, }, },
So, by default, Create React App's ESLint configuration sets sourceType
to module
. The problem arises when you try to move the-app
's contents up one level. Since your .eslintrc
did not specify sourceType
, the default value script
is used. And since .eslintrc
overrides the ESLint in the package.json
from Create React App1, the error occurs as you cannot use import
and export
in scripts.
You shouldn't create a new ESLint configuration file if you want to add new rules. Instead, just edit the configuration already in package.json
:
"eslintConfig": {
"extends": ["eslint:recommended", "react-app"],
"rules": {
"no-console": "off",
"strict": ["error", "global"]
}
}
Note that eslint-config-react-app
already sets env
for you.
1 If you check the ESLint source, the default CLI option is to use the .eslintrc
if the file exists over eslintConfig
in package.json
, see the property useEslintrc: true
. Thus the reason it is overridden.
回答2:
In case above didn't help, deleting the ios/build folder and running again worked for me.
i.e. from your new root folder
rm -r ios/build
npx react-native run-ios
Per answer in https://github.com/facebook/react-native/issues/18793
来源:https://stackoverflow.com/questions/45576822/moving-create-react-app-folder-breaks-working-app