Module build failed Cannot find module '@babel/preset-env'

Question

I was working on my react application with set up babel. Unfortunately while setting it up using yarn and when I build my bundle.js file, I run into some problems:

ERROR in ./src/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-env' from '/Users/react-file/Desktop/indecision'
    at Function.resolveSync [as sync] (/Users/react-file/Desktop/indecision/node_modules/resolve/lib/sync.js:89:15)
    at resolveStandardizedName (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePreset (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
    at loadPreset (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
    at createDescriptor (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at /Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-chain.js:320:26)
    at /Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at Generator.next (<anonymous>)
    at buildRootChain (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-chain.js:120:29)
    at buildRootChain.next (<anonymous>)
    at loadPrivatePartialConfig (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/partial.js:95:62)
    at loadPrivatePartialConfig.next (<anonymous>)
    at Function.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/partial.js:120:25)
    at Generator.next (<anonymous>)
    at evaluateSync (/Users/react-file/Desktop/indecision/node_modules/gensync/index.js:244:28)
    at Function.sync (/Users/react-file/Desktop/indecision/node_modules/gensync/index.js:84:14)
    at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/index.js:41:61)
    at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:151:26)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:3:103)
    at _next (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:194)
    at /Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:364
    at new Promise (<anonymous>)
    at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:97)
    at Object._loader (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:231:18)
    at Object.loader (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:64:18)
    at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:59:12)

Here's my package.json:

{
  "name": "Box",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "server": "live-server public/",
    "build": "webpack --watch",
    "build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "live-server": "^1.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "validator": "^13.0.0",
    "webpack": "^4.43.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "webpack-cli": "^3.3.11"
  }
}

Here's my webpack.config.js const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
      path: path.join(__dirname, 'public'),
      filename: 'bundle.js'
  }, 
  module: {
      rules: [{
          loader: 'babel-loader', 
          test: /\.js$/,
          exclude: /node_modules/
      }]
  }
};file"

And here's my .babelrc file:

{
    "presets": [
        "env",
        "react"
    ]
}

Any idea what's wrong with this?

Solution

You need to install @babel/preset-env instead of babel-preset-env.

I believe that most babel modules now live under the @babel org

Edit:

also IMHO the correct syntax for the babelrc file should be

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
}

Comments

[ABGR]

To me it seems like npm intall has not run properly. Did you try deleting node_modules and installing npm afresh?

[Admin]

I am using yarn if I delete my node modules should I simply run yarn install?

[ABGR]

Yup. But before that try installing @babel/preset-env, as one of the answers suggest, which might would do the trick.

[Admin]

how do I install @babel/preset-env ?

[Carlo]

@JoanBuan since are you using yarn: yarn install <module> and yarn remove <module> will help you

[Abilogos]

babel repository has been changed : (stackoverflow.com/a/66224363/9287628)

[B-Tron of the Autobots]

install has been replaced with add to add new dependencies.