Webpack 3 ModuleConcatenationPlugin() ruining after recompile.

[Kimel1]

I use HotModuleReplacementPlugin and ModuleConcatenationPlugin. If change code then I got error in console like: Uncaught TypeError: Cannot read property 'create' of undefined and other undefined. These errors gone if disable ModuleConcatenationPlugin

[asfktz]

Hi, @Kimel1 Thanks for letting me know!

Do you mind sharing your config with me?

Asaf

[Kimel1]

@asfktz Yes. And I want to note that error appears only if changes was made in parent component's render function. For example if comment all subcomponents. If to change "bottom" component all will be well.

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MinifyPlugin = require("babel-minify-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');

const AutoDllPlugin = require('autodll-webpack-plugin');

const vendor = [
  'react',
  'react-dom',
  'lodash',
  'lodash-es',
  'react-router-dom',
  'react-redux',
  'moment',
  'react-virtualized',
  'smoothscroll-polyfil',
  'classnames',
  'redux-thunk',
  'react-text-mask',
  'text-mask-addons',
  'prop-types',
  'redux',
  'semantic-ui-react',
  'axios'
]
const identity = i => i;

module.exports = env => {
  console.log('Env is ' + env);

  const isDev = env === 'dev';

  const ifDev = then => (isDev ? then : null);
  const ifProd = then => (env === 'prod' ? then : null);

  return {
    target: 'web',
    // cache: isDev,
    profile: false,
    entry: [
      ifDev('react-hot-loader/patch'),
      './appLoader.js'
    ].filter(identity),
    performance: { hints: false },
    context: path.resolve(__dirname, './src'),
    devtool: isDev ? 'cheap-module-eval-source-map' : 'nosources-source-map',
    resolve: {
      modules: [path.resolve(__dirname, './src'), path.resolve(__dirname, './assets'), 'node_modules'],
    },
    output: {
      path: path.resolve(__dirname, './dist'),
    //  filename: isDev ? 'app.bundle.js' : 'app.bundle.[chunkhash].js',
      publicPath: '/',
      filename: isDev ? 'app.bundle.js' : 'app.bundle.[chunkhash:8].js',
      chunkFilename: isDev ? 'app.bundle.chunk.js' : 'app.bundle.[chunkhash:8].chunk.js',
      pathinfo: isDev,
    },
    plugins: [
      ifProd(new CleanWebpackPlugin(['dist/*.*'], { verbose: true, })),
      // ifProd(new webpack.optimize.ModuleConcatenationPlugin()),
      new webpack.optimize.ModuleConcatenationPlugin(),
      ifProd(new webpack.optimize.OccurrenceOrderPlugin()),

      new webpack.EnvironmentPlugin({ DEBUG: isDev, NODE_ENV: isDev ? 'development' : 'production' }),
      new HtmlWebpackPlugin({ template: 'index.html', inject: true, minify: { collapseWhitespace: true } }),
      ifDev(new AutoDllPlugin({
        inject: true, // will inject the DLL bundles to index.html
        context: __dirname,
        debug: true,
        path: './dll',
        filename: '[name].dll.js',
        entry: {
          vendor
        },
        plugins: [
          // new webpack.optimize.ModuleConcatenationPlugin(),
          // new webpack.EnvironmentPlugin({ DEBUG: isDev, NODE_ENV: isDev ? 'development' : 'production' }),
          new webpack.NamedModulesPlugin(),
          // new webpack.HotModuleReplacementPlugin()
        ]
      })),
      ifDev(new webpack.HotModuleReplacementPlugin()),
      ifDev(new webpack.NamedModulesPlugin()),
      new ExtractTextPlugin({ filename: 'app.bundle.[contenthash].css', disable: isDev, }),
      ifProd(new MinifyPlugin({}, {comments: false, })),

    ].filter(identity),
    devServer: {
      port: 80,
      host: '127.0.0.1',
      hot: true,
      compress: true,
      historyApiFallback: true,
      disableHostCheck: true,
      contentBase: path.resolve(__dirname, './dist'),
      overlay: { warnings: true, errors: true },
    },
    module: {
      rules: [{
        test: /\.js$/,
        include: [path.resolve(__dirname,'./src') ],
        use: 'babel-loader',
        exclude: [/node_modules/]
      },{
        test: /\.(css|less)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader',  options: {
              sourceMap: isDev,
              minimize: !isDev ?
              {
                autoprefixer: {
                  add: true,
                  remove: true,
                  browsers: ['last 2 versions'],
                },
                discardComments: {
                  removeAll : true,
                },
                discardUnused: false,
                discardEmpty: false,
                mergeIdents: false,
                reduceIdents: false,
                safe: true,
              }
              : false
            }},
            // { loader: 'less-loader', options: { noIeCompat: true, sourceMap: isDev, paths: [path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, 'src')] } }
          ]
        })
      },
      // {
      //   test: /\.(png|svg|jpg|gif)$/,
      //   use: [{ loader: 'url-loader', options: { limit: 4096 } }]
      // },{
      //   test: /\.(woff|woff2|eot|ttf|otf)$/,
      //   use: ['file-loader']
      // },
      {
        test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
        use: [{ loader: 'url-loader', options: {
          limit: 100000,
          // name: '[name].[ext]'
        } }]
      }
      ]
    }
  };
};

error

Uncaught TypeError: Cannot read property 'create' of undefined
    at eval (index.js?4e30:3)
    at Object../containers/Layout.js (app.bundle.js:8111)
    at __webpack_require__ (app.bundle.js:677)
    at fn (app.bundle.js:88)
    at eval (appLoader.js:11)
    at Object../appLoader.js (app.bundle.js:8001)
    at __webpack_require__ (app.bundle.js:677)
    at fn (app.bundle.js:88)
    at Object.0 (app.bundle.js:8196)
    at __webpack_require__ (app.bundle.js:677)

import axios from "axios";

export const client = axios.create({
  baseURL: "http://127.0.0.1:3000",
  headers: {
    "Content-Type": "application/json"
  }
})

Something weird in app.bundle.js:8111 https://ibb.co/jSeMMk