Webpack Uncaught TypeError: Cannot read property 'call' of undefined

Question

Basically i have a dynamic entry chunk in react-router file. but in webpack 3 am unable to extract the css into seperate chunks from these entry files. so included the same chunknames in webpack entry.

Now the chunks are created and css without duplicates are extracted and common scss imports from multiple entry files is moved to the commonChunks entry But i start getting this error. Maybe because i specify entry chunk twice now(1 in webpack entry and another time in react-router file)

So i upgraded to 3.10 it solved the issue but now the css chunks have duplicate css in them.

So wanted to know any solutions or alternatives to extract css in seperate named chunks in webpack 3.2 or solve the duplicate css issue in 3.10

ERROR(occurs only in production mode)

manifest.a9c406e9412da8263008.js:1 Uncaught TypeError: Cannot read property 'call' of undefined at n (manifest.a9c406e9412da8263008.js:1) at Object../desktop-containers/Index/index.js (VM150 home.1ee4964ea9da62fee1c0.js:1) at n (manifest.a9c406e9412da8263008.js:1) at window.webpackJsonp (manifest.a9c406e9412da8263008.js:1) at VM150 home.1ee4964ea9da62fee1c0.js:1

link to github issue https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/185#issuecomment-419396442

/* Desktop webpack client-side config */
const webpack = require('webpack');
const path = require('path');
const DashboardPlugin = require('webpack-dashboard/plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const autoprefixer = require('autoprefixer');
const WebpackStableModuleIdAndHash = require('webpack-stable-module-id-and-hash');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const AssetsPlugin = require('assets-webpack-plugin');
const HashOutput = require('webpack-plugin-hash-output');

const nodeEnv = process.env.NODE_ENV;

const isProduction = nodeEnv === 'production';
/** ***********common rules********* */
const rules = [
  {
    test: /\.html$/,
    loader: 'html-loader'
  },
  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'babel-loader'
      }
    ]
  }
];

const plugins = [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(nodeEnv)
    },
    __BROWSER__: true
  }),
  new webpack.NamedModulesPlugin(), // used for scope hoisting in webpack 3
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: [
        autoprefixer({
          browsers: ['> 1%', 'Firefox >= 20', 'ie >= 9']
        })
      ],
      context: path.resolve(`${__dirname}client`)
    }
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: Infinity
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'main',
    children: true,
    minChunks: 2
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    minChunks: Infinity
  }),
  // optimize moment
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  // exclude mobile-specific modules
  new webpack.IgnorePlugin(/react-input-range/),
  new webpack.IgnorePlugin(/react-lazy-load/),
  new webpack.IgnorePlugin(/react-collapse/),
  new webpack.IgnorePlugin(/react-motion/),
  new webpack.IgnorePlugin(/react-scroll/)
];

/** *********end********** */

/** **********rules for non production***** */
if (!isProduction) {
  rules.push({
    test: /\.scss$/,
    exclude: /node_modules/,
    use: [
      'style-loader',
      // Using source maps breaks urls in the CSS loader
      // https://github.com/webpack/css-loader/issues/232
      // This comment solves it, but breaks testing from a local network
      // https://github.com/webpack/css-loader/issues/232#issuecomment-240449998
      // 'css-loader?sourceMap',
      'css-loader',
      'postcss-loader',
      'sass-loader',
      {
        loader: 'stylefmt-loader',
        options: {
          config: '.stylelintrc'
        }
      }
    ]
  });
  plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new BundleAnalyzerPlugin({
      analyzerPort: 9999
    })
  );
}

/** *********end******** */
/** ** only for proudction rule starts ****** */
if (isProduction) {
  rules.push({
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader!postcss-loader!sass-loader'
    })
  });
  plugins.push(
    new ExtractTextPlugin({
      filename: '[name].[contentHash].css',
      allChunks: true
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.optimize.UglifyJsPlugin(),
    new HashOutput(), // used for MD5 hashing of assets
    new WebpackStableModuleIdAndHash(),
    new AssetsPlugin({
      filename: 'assetsManifestDesktop.json',
      path: path.resolve('./build'),
      prettyPrint: true
    })
  );
}

/** **************end *********** */
module.exports = {
  devtool: isProduction ? false : 'source-map',
  context: path.join(`${__dirname}/client`),
  entry: {
    main: 'app-desktop.js',
    home: 'desktop-containers/Index',
    wizardLandingPage: 'common-containers/WizardLandingPage',
    auth: 'desktop-containers/Auth',
    vendor: [
      'babel-polyfill',
      'fingerprint',
      'isomorphic-fetch',
      'moment',
      'moment-range',
      'react',
      'react-addons-css-transition-group',
      'react-cookie',
      'react-daterange-picker',
      'react-dom',
      'react-helmet',
      'react-redux',
      'react-router',
      'react-waypoint',
      'redux',
      'redux-thunk'
    ]
  },
  output: {
    path: isProduction ? path.join(`${__dirname}/build/desktop`) : path.join(`${__dirname}/dist/desktop`), // webpack cli output directory
    publicPath: '/assets/desktop/', // from where actually assets will be served.
    filename: isProduction ? '[name].[chunkhash].js' : '[name].js',
    chunkFilename: isProduction ? '[name].[chunkhash].js' : '[name].js'
  },
  module: {
    rules
  },
  performance: isProduction && {
    maxAssetSize: 100,
    maxEntrypointSize: 300,
    hints: 'warning'
  },
  resolve: {
    alias: {
      react: 'preact-compat',
      'react-dom': 'preact-compat',
      'create-react-class': 'preact-compat/lib/create-react-class',
      components: path.resolve(__dirname, 'client/desktop-components')
    },
    extensions: ['dev-server.js', '.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
    modules: [path.join(`${__dirname}/client`), path.join(`${__dirname}/node_modules`)]
  },
  plugins,
  devServer: {
    contentBase: './dist/desktop',
    historyApiFallback: {
      index: 'index.html'
    },
    port: 7000,
    compress: isProduction,
    inline: !isProduction,
    hot: !isProduction,
    disableHostCheck: true,
    host: '0.0.0.0'
  }
};

Answer 1

Following two possible solutions may help to resolve the issue.

Either remove DedupePlugin in your webpack.config.js if you are using

//new webpack.optimize.DedupePlugin()

OR

Fix it by adding allChunks: true:

new ExtractTextPlugin({
  filename: cssFileName,
  allChunks: true
})

OR

import following two in your Webpack config

  require('style-loader/lib/addStyles');
  require('css-loader/lib/css-base');

Check this github issue & github issue1for more details