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 [email protected] [email protected]

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

Answer 1

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"

Answer 2

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 :)