Question

我已经使用create-react-app创建了一个基本的React Web应用，并在弹出后具有以下结构。工作得很好。

intended-app-home
  |- the-app
      |- config
      |- node_modules
      |- public
      |- scripts
      |- src
      |- package.json
  |- .eslintignore
  |- .eslintrc
  |- .gitignore

现在，我想将the-app的内容向上移动到文件夹intended-app-home。当我这样做时，运行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'

我错过了什么？假设app文件夹是可移植的是不安全的？

以下是我的.eslintrc内容：

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "commonjs": true,
    "node": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 6
  },
  "rules": {
    "no-console": "off",
    "strict": ["error", "global"]
  }
}

Answer 1

您必须将以下内容添加到.eslintrc，因为错误提示：

"parserOptions": {
  "sourceType": "module"
}

每the ESLint documentation：

sourceType - 如果您的代码位于ECMAScript模块中，则设置为"script"（默认）或"module"。

问题是，在ECMAScript 2015中，有诸如脚本和模块之类的东西。脚本只是简单的JavaScript文件。另一方面，模块是导出数据和/或导入其他模块的脚本。因此，如果要使用import或export，则必须指定"sourceType": "module"，以便ESLint可以使用Espree正确解析模块代码并将其拖放。

现在解释为什么只有当the-app内容向上移动一级时才会出现错误。默认情况下，Create React App对package.json中指定的项目使用以下ESLint配置：

"eslintConfig": {
  "extends": "react-app"
}

因此，ESLint配置只是扩展了React App配置。如果您在eslint-config-react-app中查看index.js的来源：

parserOptions: {
  ecmaVersion: 6,
  sourceType: 'module',
  ecmaFeatures: {
    jsx: true,
    generators: true,
    experimentalObjectRestSpread: true,
  },
},

因此，默认情况下，Create React App的ESLint配置将sourceType设置为module。当您尝试将the-app的内容上移一级时，会出现问题。由于您的.eslintrc 不指定sourceType，因此使用默认值script。由于.eslintrc会覆盖来自Create React App ¹的package.json中的ESLint，因此您在脚本中无法使用import和export时会发生错误

如果要添加新规则，则不应创建新的ESLint配置文件。相反，只需编辑package.json中已有的配置：

"eslintConfig": {
  "extends": ["eslint:recommended", "react-app"],
  "rules": {
    "no-console": "off",
    "strict": ["error", "global"]
  }
}

请注意，eslint-config-react-app已为您设置env。

¹如果选中the ESLint source，默认的CLI选项是使用.eslintrc，如果文件存在于eslintConfig package.json之内，查看属性useEslintrc: true。因此被覆盖的原因。

Answer 2

如果上述方法没有帮助，删除ios / build文件夹并再次运行对我来说是有效的。

即从您的新根文件夹

 rm -r ios/build
 npx react-native run-ios

https://github.com/facebook/react-native/issues/18793中的每个答案

移动Create React App文件夹会中断正在运行的app

2 个答案: