ReactJS Cannot find babel-preset-es2015 on npm start

Question

I got some test of ReactJS and Here's my Code:

.babelrc

{
     { "presets": [ [ "es2015", { "modules": false } ] ] }
}

App.js

import React, { Component } from 'react';
class App extends Component {
    render() {
        return ( <div> <h1> Hello World </h1> </div> );
    }
}
export default App;

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>React App</title>
</head>

<body>
    <div id="app"></div>
    <script src='index_bundle.js'></script>
</body>

</html>

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render( <App/> , document.getElementById('app'));

package.json

{
    "name": "reactapp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "webpack-dev-server --mode development --open --hot",
        "build": "webpack --mode production"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "gulp-babel": "^8.0.0",
        "react": "^16.7.0",
        "react-dom": "^16.7.0",
        "webpack": "^4.28.4",
        "webpack-cli": "^3.2.1",
        "webpack-dev-server": "^3.1.14"
    },
    "devDependencies": {
        "@babel/core": "^7.2.2",
        "@babel/preset-env": "^7.2.3",
        "babel-core": "^6.26.3",
        "babel-loader": "^8.0.5",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "html-webpack-plugin": "^3.2.0"
    }
}

Node.js Version: 6.4.1

babel core version: 7.2.2

The problem is, when i hit npm start it brings me an error and the page displayed empty:

ERROR in ./main.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-es2015'

Tried some solutions but the error still exists.

babel-preset-es2015 is deprecated. Use babel-preset-env instead. — NoobTW

Ferry Sanjaya Ferry Sanjaya · Accepted Answer · 2019-07-29T08:11:31

ES2015 is deprecated, change on your webpackconfig.js to

module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ["@babel/preset-env"]
            }
         }
      ]
   },

And set .babelrc to:

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

ReactJS Cannot find babel-preset-es2015 on npm start

3 Answers