reactjsgulpextract-text-pluginextracttextwebpackplugin

Webpack 2 extract text plugin entrypoints.length issues


I have an issue with upgrading to webpack 2 and the extract text plugin. I have the dev version (without this plugin) working and I cant see whats different. The error I get is

node_modules\webpack\lib\Chunk.js:62
            return this.entrypoints.length > 0;

TypeError: Cannot read property 'length' of undefined

I have gulp running webpack 2 and this plugin for a single css file. This is the main part of my webpack config (happy to provide it all if needed):

     ...
     modules: { rules :[ ... {
         test: /\.scss/,
         exclude: /node_modules/,
         use: [
             "style-loader?sourceMap",
             {
                 loader: "css-loader",
                 options: {
                     minimize: true,
                     modules: true,
                     importLoaders: true,
                     localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
                 },
             },
             {
                 loader: "postcss-loader",
                 options: { ...postCSSConfig },
             },
             {
                 loader: "sass-loader",
                 options: { includePaths: [path.join(process.cwd(), "src", "Styles", "Includes")] },
             },
         ],
     }, ]},
     plugins: [
         new ExtractTextPlugin({
             filename: "[contenthash].css",
             allChunks: true,
         }), ...

Im using the following versions:

Webpack: 2.3.3

Extract text plugn: 2.0.1

Edit: Here is my entry point,

context: path.resolve(process.cwd(), "./src/"),
entry: [
    "babel-polyfill",
    "whatwg-fetch",
    "Boot",
],
devtool: "eval",
resolve: {
    modules: ["src", "node_modules"],
    extensions: [".js", ".jsx"],
},

Any ideas would be great. Thanks in advance.


Solution

  • According to docs, you also have to create proper rule for loading styles.

    Please take a look at that, it's my rule. Please let me know if it helped you.

     {
          test: /\.(scss|css)$/,
          exclude: /node_modules/
          use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: ['css-loader', 'postcss-loader', 'sass-loader']
          })
     }
    

    Anyway, yet I didn't manage to use ExtractTextPlugin with sourceMaps, so I can't give you solution to use this plugin with source maps.