React: Couldn't find preset "env react" relative to directory "src"

Question

I have added presets react and env into my react project using the command below:

yarn global add 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.

The folder structure looks like this:

indecesion-app(folder name of the app)

node_modules
public
src
package.json
yarn.lock

Now when I run the command

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

Shouldn't you install [@babel/preset-react](https://www.npmjs.com/package/@babel/preset-react) instead of `babel-preset-react` ? The second one is way older, and the first one is explained on the [babel website](https://babeljs.io/docs/en/babel-preset-react) directly. Same remark on `babel-preset-env` with [@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env) — Orlyyn, Apr 09 '20 at 08:39
@Orlyyn I tried @babel/preset-react and env, but getting the same error. — Akrit, Apr 09 '20 at 09:00

score 22 · Answer 1 · answered May 05 '20 at 10:24

22

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"

answered May 05 '20 at 10:24

Mateus Alves

221
1
3

I've just had this same error and this solution helped me. Adding quotes here: `--presets="env,react"` – Slaven Bunijevac Sep 25 '22 at 10:09

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

4

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

Then run the following command:

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

Hope this helps :)

edited Jun 20 '20 at 09:12

Community

1
1

answered May 07 '20 at 10:07

Chiraag Mittal

41
3

score 3 · Answer 3 · answered Apr 18 '20 at 02:18

I was having the same problem as this looks like it is part of the Udemy course on React.

Delete all of your global NPM/Yarn modules related to Babel. On Windows mine were in c:\users\user\appdata\roaming\npm\nodemodules as it was installed globally.
npm init the project
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

score 2 · Answer 4 · answered Jun 09 '20 at 15:26

Here's what worked for me. Delete any Babel in the node_modules directory. Then, the first 3 steps as motoXORx90 stated..

npm init the project

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

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

score 1 · Answer 5 · edited Apr 08 '21 at 17:18

1

just use the code

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

edited Apr 08 '21 at 17:18

Tomerikoo

18,379
16
47
61

answered Apr 08 '21 at 16:55

Md Khairul Islam

371
2
4

score 1 · Answer 6 · answered Jun 18 '21 at 15:09

For all those guys out there, who are working on react course of UDEMY and facing this error, a simple fix available here. Don't uninstall anything... just execute the below statement

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

That's it

Thank me later.

Orlyyn · Answer 7 · 2020-04-10T08:43:18.293

0

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:

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

So your babel command should look like this:

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

Hope this helps!

edited Apr 10 '20 at 08:43

answered Apr 09 '20 at 09:13

Orlyyn

2,296
2
20
32

HI Orlynn, the same issue persists even after applying your command. – Akrit Apr 09 '20 at 13:42
For this command, I used the `@babel/cli` package, and called it with `npx babel` instead of just `babel`... I encountered your problem on the --presets values, and solved it by using the different @babel/ packages... Maybe try with the [@babel/cli](https://babeljs.io/docs/en/babel-cli) package as well ? – Orlyyn Apr 09 '20 at 14:06
I deleted bable and reinstalled it globally using npm i -g @babel/cli. I then commanded: yarn init, in my root folder which generated package.json file. Then: yarn add @babel/preset-react @babel/preset-env. now dependencies of presets were added in package.json. Then I did babel src/app.js --out-file=public/scripts/app.js --presets=@babel/preset-react,@babel/preset-env. Now a new error is coming which says "Cannot find module '@babel/core' ". I just pasted a small portion of the error log – Akrit Apr 09 '20 at 14:56

score 0 · Answer 8 · answered Aug 12 '20 at 12:34

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

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

score 0 · Answer 9 · answered Sep 15 '22 at 17:17

In your command you forgot to put the ""(double quotes) as you defined the presets correct is

 --presets="env,react"

not

--presets=env,react  //wrong

so just add the double quotes so the correct command is .

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

React: Couldn't find preset "env react" relative to directory "src"

9 Answers9