Moving Create React App folder breaks working app

问题

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 App¹, 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.

¹ 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

标签

reactjs

ecmascript-6

eslint

create-react-app