React：找不到相对于目录“src”的预设“env react”答案

【问题标题】：React: Couldn't find preset "env react" relative to directory "src"React：找不到相对于目录“src”的预设“env react”
【发布时间】：2020-07-21 19:43:59
【问题描述】：

我已使用以下命令将预设 react 和 env 添加到我的 react 项目中：

yarn 全局添加 babel-preset-react@6.24.1 babel-preset-env@1.5.2

My package.json file has updated the presets and looks like the following:
  {
  "name": "indecesion-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "ak",
  "license": "MIT",
  "dependencies": {
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1"
  }
}

甚至我的 node_modules 文件夹也更新了预设。

文件夹结构如下：

indecesion-app(应用的文件夹名)

node_modules
公开
源代码
package.json
纱线锁

现在当我运行命令时

indecesion-app> babel src/app.js --out-file=public/scripts/app.js --presets=env,react

显示错误：

Error: Couldn't find preset "env react" relative to directory "src"
at C:\Users\anil\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (C:\Users\anil\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
at OptionManager.mergePresets (C:\Users\anil\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
at OptionManager.mergeOptions (C:\Users\anil\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
at OptionManager.init (C:\Users\anil\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\Users\anil\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (C:\Users\anil\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (C:\Users\anil\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transform (C:\Users\anil\AppData\Roaming\npm\node_modules\babel-cli\lib\babel\util.js:50:22)

请提出解决方案

【问题讨论】：

您不应该安装@babel/preset-react 而不是babel-preset-react 吗？第二个比较老，第一个直接在babel website上解释。 babel-preset-env 和 @babel/preset-env 的评论相同
@Orlyyn 我尝试了@babel/preset-react 和 env，但得到了同样的错误。

标签： reactjs babel-preset-env

【解决方案1】：

我遇到了同样的问题，只需添加引号就可以解决它：

babel src/app.js --out-file=public/scripts/app.js --presets="env,react"

【讨论】：

【解决方案2】：

首先，请确保已安装以下软件包：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

然后运行以下命令：

babel src/app.js --out-file=public/scripts/app.js --presets="env,react"

希望这会有所帮助:)

【讨论】：

【解决方案3】：

我遇到了同样的问题，这看起来像是 Udemy 的 React 课程的一部分。

删除所有与 Babel 相关的全局 NPM/Yarn 模块。在 Windows 上，我的在 c:\users\user\appdata\roaming\npm\nodemodules 中，因为它是全局安装的。
npm 初始化项目
npm install --save-dev @babel/core @babel/cli
npm install --save-dev @babel/preset-react @babel/preset-env
npx babel .\src\app.js -o .\public\scripts\app.js --presets=@babel/preset-env,@babel/preset-react

【讨论】：

【解决方案4】：

这对我有用。删除 node_modules 目录中的所有 Babel。然后，正如 motoXORx90 所说的前 3 个步骤..

npm 初始化项目

npm install --save-dev @babel/core @babel/cli

npm install --save-dev @babel/preset-react @babel/preset-env

最后一步：

npx babel src/app.js --out-file=public/scripts/app.js --presets=@babel/preset-env,@babel/preset-react

【讨论】：

【解决方案5】：

只需使用代码

babel src/app.js --out-file=public/scripts/app.js --presets='env,react'

【讨论】：

【解决方案6】：

对于那些正在研究 UDEMY 的反应课程并面临此错误的人，这里有一个简单的修复程序。 不要卸载任何东西...只需执行以下语句

babel src/app.js --out-file=public/scripts/app.js --presets='env,react'

就是这样

稍后谢谢我。

【讨论】：

【解决方案7】：

我删除了 bable 并使用

在全局范围内重新安装了它

npm i -g @babel/cli.

然后我命令：yarn init，在我生成 package.json 文件的根文件夹中。

然后：yarn add @babel/preset-react @babel/preset-env。现在在 package.json 中添加了预设的依赖项。

然后我做了babel src/app.js --out-file=public/scripts/app.js --presets=@babel/preset-react,@babel/preset-env

我现在遇到错误

 internal/modules/cjs/loader.js:800
    throw err;
    ^

Error: Cannot find module '@babel/core'
Require stack:
- C:\Users\anil\AppData\Roaming\npm\node_modules\@babel\cli\lib\babel\options.js
- C:\Users\anil\AppData\Roaming\npm\node_modules\@babel\cli\lib\babel\index.js
- C:\Users\anil\AppData\Roaming\npm\node_modules\@babel\cli\bin\babel.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
    at Function.Module._load (internal/modules/cjs/loader.js:690:27)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at _core (C:\Users\anil\AppData\Roaming\npm\node_modules\@babel\cli\lib\babel\options.js:29:16)
    at Object.<anonymous> (C:\Users\anil\AppData\Roaming\npm\node_modules\@babel\cli\lib\babel\options.js:138:76)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\anil\\AppData\\Roaming\\npm\\node_modules\\@babel\\cli\\lib\\babel\\options.js',
    'C:\\Users\\anil\\AppData\\Roaming\\npm\\node_modules\\@babel\\cli\\lib\\babel\\index.js',
    'C:\\Users\\anil\\AppData\\Roaming\\npm\\node_modules\\@babel\\cli\\bin\\babel.js'
  ]
}

我通过添加 yarn add @babel/core 尝试并安装了@bable/core，但同样的错误仍然存在

【讨论】：

【解决方案8】：

首先，请确保已安装以下软件包：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

假设你安装了上面的包，在babel docs，它声明要使用预设，你应该执行以下操作：

--presets=@babel/preset-react,@babel/preset-env

所以你的 babel 命令应该是这样的：

babel src/app.js --out-file=public/scripts/app.js --presets=@babel/preset-react,@babel/preset-env

希望这会有所帮助！

【讨论】：

嗨 Orlynn，即使在应用您的命令后，同样的问题仍然存在。
对于这个命令，我使用了@babel/cli 包，并用npx babel 而不是babel 来调用它...我在 --presets 值上遇到了你的问题，并解决了它通过使用不同的@babel/ 包...也许也可以尝试使用@babel/cli 包？
我删除了 bable 并使用 npm i -g @babel/cli 在全局范围内重新安装了它。然后我命令：yarn init，在我生成 package.json 文件的根文件夹中。然后：纱线添加@babel/preset-react @babel/preset-env。现在在 package.json 中添加了预设的依赖项。然后我做了 babel src/app.js --out-file=public/scripts/app.js --presets=@babel/preset-react,@babel/preset-env。现在出现了一个新错误，上面写着“找不到模块'@babel/core'”。我只是粘贴了一小部分错误日志

【解决方案9】：

我遵循了上述答案，但仍然无法运行。然后我注意到错误日志中写的是什么。听从他们的建议，以下命令完美运行

npx babel .\src\app.js -o .\public\scripts\app.js --presets=module:@babel\preset-env,module:@babel\preset-react

我的 package.json

"@babel/cli": "^7.10.5",
"@babel/core": "^7.11.1",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4"

【讨论】：