Webpack Uncaught TypeError:无法读取属性 'call'未定义的 [英] Webpack Uncaught TypeError: Cannot read property 'call' of undefined

问题描述

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

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.

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

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)

所以我升级到 3.10 它解决了这个问题，但现在 css 块中有重复的 css.

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

所以想知道在 webpack 3.2 中以单独命名块提取 css 的任何解决方案或替代方案，或解决 3.10

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(仅在生产模式下发生)

ERROR(occurs only in production mode)

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

链接到github问题https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/185#issuecomment-419396442

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'
  }
};

推荐答案

遵循两种可能的解决方案可能有助于解决问题.

Following two possible solutions may help to resolve the issue.

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

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

//new webpack.optimize.DedupePlugin()

或

通过添加allChunks: true来修复它:

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

或

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

import following two in your Webpack config

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

检查这个 github 问题 &github issue1了解更多详情

Check this github issue & github issue1for more details

这篇关于Webpack Uncaught TypeError:无法读取属性 'call'未定义的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！