javascript - Webpack 未捕获类型错误 : Cannot read property 'call' of undefined

Question

基本上我在 react-router 文件中有一个动态入口 block 。但是在 webpack 3 中，我无法从这些入口文件中将 css 提取到单独的 block 中。所以在 webpack 条目中包含相同的 block 名。

现在创建了 block 并提取了没有重复项的 css，并将来自多个条目文件的公共(public) scss 导入移动到 commonChunks 条目但我开始收到此错误。可能是因为我现在指定了两次入口 block (一次在 webpack 入口中，另一次在 react-router 文件中)

所以我升级到 3.10 它解决了问题，但现在 css block 中有重复的 css。

所以想知道在 webpack 3.2 中的单独命名 block 中提取 css 或解决 3.10

中的重复 css 问题的任何解决方案或替代方案

ERROR(仅在生产模式下出现)

manifest.a9c406e9412da8263008.js:1 未捕获类型错误:无法读取未定义的属性“调用”
在 n ( list .a9c406e9412da8263008.js:1)
在 Object../desktop-containers/Index/index.js (VM150 home.1ee4964ea9da62fee1c0.js:1)
在 n ( list .a9c406e9412da8263008.js:1)
在 window.webpackJsonp( list .a9c406e9412da8263008.js:1)
在 VM150 home.1ee4964ea9da62fee1c0.js:1

链接到github问题 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

以下两种可能的解决方案可能有助于解决问题。

如果您正在使用，请在您的 webpack.config.js 中删除 DedupePlugin

//new webpack.optimize.DedupePlugin()

或

通过添加 allChunks: true 修复它:

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

或

在您的 Webpack 配置中导入以下两个

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

查看此 github issue 和 github issue1 了解更多详情