Upgrading webpack4 webpack-merge react issue

Question

I've been trying to get a React project updated to webpack4 but no matter the configuration or advise/solution I try it still errors.

I currently have the following setup:

package.json

{
  "name": "PROJECTNAME",
  "version": "1.0.13",
  "description": "DESC",
  "main": "index.js",
  "engines": {
    "node": "8.2.1"
  },
  "scripts": {
    "build": "webpack --config webpack.prod.js --progress",
    "dev": "webpack-dev-server --config webpack.dev.js --open --hot --watch"
  },
  "keywords": [],
  "author": "AUTHOR",
  "license": "MIT",
  "resolve": {
    "extensions": [
      ".js",
      ".scss"
    ]
  },
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-svg-core": "^1.2.2",
    "@fortawesome/free-regular-svg-icons": "^5.2.0",
    "@fortawesome/free-solid-svg-icons": "^5.2.0",
    "@fortawesome/react-fontawesome": "^0.1.0",
    "ajv": "^6.5.2",
    "ajv-keywords": "^3.2.0",
    "axios": "^0.18.0",
    "fusioncharts": "^3.12.2",
    "node-sass": "^4.6.1",
    "prop-types": "^15.6.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-fusioncharts": "^1.0.5",
    "react-resize-detector": "^1.1.0",
    "react-router-dom": "^4.2.2",
    "react-select": "^1.1.0",
    "recharts": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-function-bind": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-stage-0": "^7.0.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "classnames": "^2.2.6",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.0.6",
    "react-hot-loader": "^4.3.11",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.0",
    "webpack-merge": "^4.1.4"
  }
}

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/plugin-proposal-function-bind"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties"
  ]
}

webpack.commonn.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        path: path.join(__dirname,'/public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env','react','es2015'],
                        plugins: ['transform-class-properties']
                    }
                }
            },
            {
                test: /\.css$/,
                use: ["style-loader","css-loader"]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['public']),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

webpack.dev.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './public'
    }
});

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = merge(common, {
    mode: 'production',
    optimization: {
        minimizer: [
            new UglifyJSPlugin({
                sourceMap: true,
                uglifyOptions: {
                    compress: {
                        inline: false
                    },
                    mangle: {
                        keep_fnames: true
                    }
                }
            })
        ]
    },
    devtool: 'source-map'
});

index.js

"use strict";
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/app.scss';
import App from './components/App';

if (process.env.NODE_ENV !== 'production') {
    console.log('USING DEV configuration')
}

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

The current ERROR is:

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-env' from 'user/mywork/dev' - Did you mean "@babel/env"?

I was previously using stage-2 or stage-0 for enabling arrow functions etc but that seemed to be conflicting with preset-env so have removed that for now and expanded the .babelrc presets as recommended but still can't seem to get the whole thing working.

Any advise most welcome, thanks.

Answer 1

You are specifying babel options in two places, first in .babelrc, then in webpack.commonn.js. The options in webpack.commonn.js takes precedence, but that setting is wrong:

presets: ['env','react','es2015']

With the above you are telling babel to look for 'babel-preset-env', 'babel-preset-react', etc..., which you did not install.

Thus you got the error:

Cannot find module 'babel-preset-env' from 'user/mywork/dev' - Did you mean "@babel/env"?

Since you installed:

@babel/preset-env, and @babel/preset-react, etc. 

you should have specified:

presets: ['@babel/env','@babel/preset-react', .... ],

But you should have specify babel's options in one place, either in webpack's configuration or in .babelrc -- not in two place.

Another error I notice is: babel-plugin-transform-class-properties, which is not compatible with bable@7. You should install @babel/plugin-proposal-class-properties.