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.

apollo apollo · Accepted Answer · 2018-11-20T06:28:21

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.

Upgrading webpack4 webpack-merge react issue

1 Answers