[英]React: Couldn't find preset “env react” relative to directory “src”
I have added presets react and env into my react project using the command below:我已使用以下命令将预设 react 和 env 添加到我的 react 项目中:
yarn global add babel-preset-react@6.24.1 babel-preset-env@1.5.2 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"
}
}
Even my node_modules folder has updated the presets.甚至我的 node_modules 文件夹也更新了预设。
The folder structure looks like this:文件夹结构如下所示:
indecesion-app(folder name of the app) indecesion-app(应用程序的文件夹名称)
yarn.lock纱线锁
Now when I run the command现在当我运行命令时
indecesion-app> babel src/app.js --out-file=public/scripts/app.js --presets=env,react indecesion-app> babel src/app.js --out-file=public/scripts/app.js --presets=env,react
It is showing the error:它显示错误:
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)
Please suggest a solution请提出解决方案
I had the same problem and was able to fix it just by adding quotes:我遇到了同样的问题,只需添加引号即可解决:
babel src/app.js --out-file=public/scripts/app.js --presets="env,react" babel src/app.js --out-file=public/scripts/app.js --presets="env,react"
I was having the same problem as this looks like it is part of the Udemy course on React.我遇到了同样的问题,这看起来像是 Udemy 的 React 课程的一部分。
Delete all of your global NPM/Yarn modules related to Babel.删除所有与 Babel 相关的全局 NPM/Yarn 模块。 On Windows mine were in c:\users\user\appdata\roaming\npm\nodemodules as it was installed globally.
在 Windows 上,我的在 c:\users\user\appdata\roaming\npm\nodemodules 中,因为它是全局安装的。
npm init the project npm 启动项目
npm install --save-dev @babel/core @babel/cli npm install --save-dev @babel/core @babel/cli
npm install --save-dev @babel/preset-react @babel/preset-env 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 npx babel.\src\app.js -o.\public\scripts\app.js --presets=@babel/preset-env,@babel/preset-react
First of all, be sure to have installed the following packages:首先,确保已经安装了以下软件包:
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react
Then run the following command:然后运行以下命令:
babel src/app.js --out-file=public/scripts/app.js --presets="env,react" babel src/app.js --out-file=public/scripts/app.js --presets="env,react"
Hope this helps:)希望这可以帮助:)
just use the code只需使用代码
babel src/app.js --out-file=public/scripts/app.js --presets='env,react'
First of all, be sure to have installed the following packages:首先,确保已经安装了以下软件包:
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react
Assuming that you installed the packages above, in the babel docs , it states that to use preset, you should do the following:假设您安装了上面的软件包,在babel docs中,它声明要使用预设,您应该执行以下操作:
--presets=@babel/preset-react,@babel/preset-env
So your babel command should look like this:所以你的 babel 命令应该是这样的:
babel src/app.js --out-file=public/scripts/app.js --presets=@babel/preset-react,@babel/preset-env
Hope this helps!希望这可以帮助!
I deleted bable and reinstalled it globally using我删除了 bable 并使用全局重新安装它
npm i -g @babel/cli.
I then commanded: yarn init
, in my root folder which generated package.json
file.然后我命令:
yarn init
,在我生成package.json
文件的根文件夹中。
Then: yarn add @babel/preset-react @babel/preset-env
.然后:
yarn add @babel/preset-react @babel/preset-env
。 now dependencies of presets were added in package.json.现在在 package.json 中添加了预设的依赖项。
Then I did babel src/app.js --out-file=public/scripts/app.js --presets=@babel/preset-react,@babel/preset-env
然后我做了
babel src/app.js --out-file=public/scripts/app.js --presets=@babel/preset-react,@babel/preset-env
I am now getting an error我现在收到一个错误
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'
]
}
I tried and installed @bable/core by adding yarn add @babel/core
, but the same error persists我通过添加
yarn add @babel/core
,但同样的错误仍然存在
Here's what worked for me.这对我有用。 Delete any Babel in the node_modules directory.
删除 node_modules 目录中的所有 Babel。 Then, the first 3 steps as motoXORx90 stated..
然后,正如 motoXORx90 所说的前 3 个步骤。
npm init the project npm 启动项目
npm install --save-dev @babel/core @babel/cli npm install --save-dev @babel/core @babel/cli
npm install --save-dev @babel/preset-react @babel/preset-env npm install --save-dev @babel/preset-react @babel/preset-env
For the last step do:最后一步:
npx babel src/app.js --out-file=public/scripts/app.js --presets=@babel/preset-env,@babel/preset-react npx babel src/app.js --out-file=public/scripts/app.js --presets=@babel/preset-env,@babel/preset-react
I followed above answers but still couldn't make it run.我遵循了上述答案,但仍然无法使其运行。 Then I noticed what is written in error logs.
然后我注意到错误日志中写的是什么。 Followed their advice and following command ran perfectly
听从他们的建议,以下命令完美运行
npx babel .\src\app.js -o .\public\scripts\app.js --presets=module:@babel\preset-env,module:@babel\preset-react
My package.json我的 package.json
"@babel/cli": "^7.10.5",
"@babel/core": "^7.11.1",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4"
For all those guys out there, who are working on react course of UDEMY and facing this error, a simple fix available here.对于那些正在研究 UDEMY 的反应课程并面临此错误的人,这里有一个简单的修复程序。 Don't uninstall anything... just execute the below statement
不要卸载任何东西......只需执行以下语句
babel src/app.js --out-file=public/scripts/app.js --presets='env,react' babel src/app.js --out-file=public/scripts/app.js --presets='env,react'
That's it而已
Thank me later.晚点再谢我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.