错误解决：'npx create react app Must use import to load ES Module'

在使用 'npx create react app' 命令创建一个 React 应用时，你可能会遇到一个错误，它的提示信息为'Must use import to load ES Module'。这个错误提示信息的意思是你需要使用 import 方法来加载 ES6 模块。

原因

这个错误的原因在于项目使用的是 ES6 模块语法而不是 CommonJS 规范。 'create-react-app' 默认会启用 Babel 转译器，将 ES6 语法转换成 CommonJS 规范，但在某些情况下，Babel 无法转换 ES6 模块导入的语法。因此，出现了这个错误。

解决方法

方法一

为了解决这个问题，你需要安装 'esm' 依赖，该依赖是一个将 ES6 模块转换为 CommonJS 规范的包。你需要在根目录下安装该依赖，在命令行中输入以下代码：

npm install esm --save-dev

安装完成后，你需要对 'react-scripts' 进行修改，以便支持 ES6 模块的导入。在 package.json 文件中添加以下代码：

"scripts": {
   "start": "node -r esm node_modules/react-scripts/bin/react-scripts.js start",
   "build": "node -r esm node_modules/react-scripts/bin/react-scripts.js build",
   "test": "node -r esm node_modules/react-scripts/bin/react-scripts.js test"
}

这样，你的 'create-react-app' 就支持 ES6 模块导入了。

方法二

在项目的根目录下添加一个 '.env' 文件，并在文件中添加以下代码：

SKIP_PREFLIGHT_CHECK=true

这个设置指示 'create-react-app' 不检查你的项目是否符合其规范。它会取消 'react-scripts' 中的某些检查，允许你使用 ES6 模块导入。

这是第二种解决方法。注意，这种方法虽然简单，但是它可能会导致其他的问题。

结语

以上是解决 'npx create react app Must use import to load ES Module' 错误的两种方法。选择解决方法时，需要根据自己的实际情况进行选择。

// 方法一
"scripts": {
  "start": "node -r esm node_modules/react-scripts/bin/react-scripts.js start",
  "build": "node -r esm node_modules/react-scripts/bin/react-scripts.js build",
  "test": "node -r esm node_modules/react-scripts/bin/react-scripts.js test"
}

// 方法二
SKIP_PREFLIGHT_CHECK=true