Webpack - Babel Error - Couldn't find preset "@babel/env" relative to directory

Question

I'm a developer newbie. In trying to build my application I received the below error. I referenced: Similar Issue but was unable to resolve:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Couldn't find preset "@babel/env" relative to directory "/home/jdev/www/react-redux-node-elasticsearch"
at /home/jdev/www/react-redux-node-elasticsearch/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19

This is my package.json

"dependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-env": "^2.4.1",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "express": "^4.16.4",
    "pug": "^2.0.3",
    "webpack": "^4.28.4"
  },
  "devDependencies": {
    "webpack-cli": "^3.2.1"
  }

Here is the contents of .babelrc

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

Can someone assist with the configuration? This is very confusing for a newbie like myself and I've looked a multiple issues online and I have not been able to solve this. I think you in advance for your time and assistance.

Answer 1

Jeff, you are correct it is a versioning issue. This may be an acceptable work-a-round for you for now.

In your package.json file revise your code to the following dependency versions:

"dependencies": {
  "babel": "^6.5.2",
  "babel-cli": "^6.18.0",
  "babel-core": "^6.21.0",
  "babel-loader": "^6.2.10",
  "babel-preset-es2015": "^6.18.0",
  "babel-preset-react": "^6.16.0",
  "express": "^4.14.0",
  "pug": "^2.0.0-beta6",
  "react": "^15.4.2",
  "react-dom": "^15.4.2",
  "webpack": "^1.14.0"
}

Your .babelrc file looks fine.

Also, add the following in your webpack.config.js file to ensure you have the configurations correct here as well:

module.exports = {
  entry: "./path/to/your/app.js",
  output: {
    path: __dirname + "/src/js",
    filename: "bundle.min.js"
},
module: {
    loaders: [{
        exclude: /(node_modules)/,
        loader: "babel",
        query: {
            presets: ["es2015", "react"]
        }
    }]
},
  watch: true
}