Webpack 4.5.0 package react 16.3.1 development mode popProvider error

[dreamthen]

Do you want to request a feature or report a bug?
Bug
What is the current behavior?
hi,I used webpack 4.5.0 to package react 16.3.1 and react-dom 16.3.1. There was no problem with compiling, but there was a react-dom.development.js problem with the browser:

Uncaught TypeError: Cannot read property 'popProvider' of undefined

Opened the react-dom.development.js file and there was a problem with this sentence:

var popProvider = newContext.popProvider;

in ReactFiberScheduler Function.
I have just discovered that this problem only occurs in the development mode, there is no problem in the production mode.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
I tried to pack react 16.3.1 and react-dom 16.3.1 with webpack 3.x and webpack devserver 2.x, no problem.
Below is my webpack.config.js:

const webpack = require("webpack"),
    path = require("path"),
    ExtractTextPlugin = require("extract-text-webpack-plugin"),
    HtmlWebpackPlugin = require("html-webpack-plugin"),
    UglifyJsPlugin = require("uglifyjs-webpack-plugin");

const PUBLIC_DIR = "/",
    DLL_DIR = path.resolve(__dirname, "../dll"),
    APP_DIR = path.resolve(__dirname, "../scripts"),
    ROOT_DIR = path.resolve(__dirname, "../"),
    BUILD_DIR = path.resolve(__dirname, "../build"),
    STYLE_DIR = path.resolve(__dirname, "../stylesheets"),
    MANIFEST_DIR = require(path.resolve(__dirname, `${DLL_DIR}/vendor_manifest.dll.json`));

const port = 9997;

const webpackDevConfig = {
    mode: "development",
    devtool: "source-map",
    entry: {
        index: `${APP_DIR}/index.js`
    },
    output: {
        publicPath: PUBLIC_DIR,
        filename: "[name]_[hash].js",
        path: BUILD_DIR
    },
    optimization: {
        minimize: true,
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: true,
                uglifyOptions: {
                    compress: {
                        unused: false,
                        dead_code: false,
                        warnings: true
                    },
                    output: {
                        comments: true
                    }
                }
            })
        ]
    },
    resolve: {
        modules: [
            "node_modules",
            APP_DIR,
            DLL_DIR
        ]
    },
    externals: {
        jquery: "jQuery"
    },
    module: {
        rules: [{
            test: /.js[x]?$/,
            include: [
                APP_DIR,
                DLL_DIR,
                STYLE_DIR
            ],
            use: [{loader: "babel-loader"}]
        }, {
            test: /.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{loader: "css-loader", options: {importLoaders: 1}}, {loader: "postcss-loader"}],
                publicPath: STYLE_DIR
            })
        }, {
            test: /.(png|jpg|jpeg|bmp|gif)$/,
            use: [{
                loader: "url-loader",
                options: {
                    limit: 10000
                }
            }, {loader: "image-webpack-loader"}]
        }]
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.DllReferencePlugin({
            manifest: MANIFEST_DIR,
            context: ROOT_DIR
        }),
        new ExtractTextPlugin("[name]_[hash].css"),
        new HtmlWebpackPlugin({
            publicPath: PUBLIC_DIR,
            filename: "index.html",
            template: `${ROOT_DIR}/index.html`,
            chunks: ['index'],
            inject: 'body'
        })
    ],
    devServer: {
        host: "0.0.0.0",
        port: port,
        proxy: {},
        historyApiFallback: true
    }
};

module.exports = webpackDevConfig;

What is the expected behavior?
normal operation

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

react 16.3.1
react-dom 16.3.1
macOs High Sierra 10.13.3

[gaearon]

Please provide a full isolated example reproducing this. My guess is you have a mix of 16.3.0 and 16.3.1 (perhaps because of the DLL config). Try deleting node_modules and any caches, and then rebuilding.

[dreamthen]

I've tried the way you said, and it doesn't work.
Here is an example:
https://github.com/dreamthen/service_set_sail/tree/20180406_service
command:
git clone https://github.com/dreamthen/service_set_sail.git -b 20180406_service
npm i
npm run dll
npm start
Run in the local development environment
port 9997

[gaearon]

This looks like an Uglify bug. If I remove Uglify from the config, it works.

Original code in the development version of react-dom which you use:

  var rendererSigil = void 0;
  {
    // Use this to detect multiple renderers using the same context
    rendererSigil = {};
  }

  // (skipped)

  return {
    pushProvider: pushProvider,
    popProvider: popProvider
  };

It's clear you're using this development version because your bundle has this comment (which doesn't exist in production version):

However as you can see, the comment is actually inserted in a wrong place, and the newline breaks the return statement. So the function should return an object, but it becomes just a return, and this is why later when we try to read something from that object, it throws.

I encourage you to file an issue with Uglify.