Window not defined error when using extract-text-webpack-plugin React

Question

I am using webpack to create my responsive components and I am trying to use extract-text-webpack-plugin to separate my css from my generated js file. However, when I try to build the component, I get the following error: Module build failed: ReferenceError: window is not defined .

My webpack.config.js file looks like this:

 var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: { MainComponent: './src/main.js' }, output: { libraryTarget: 'var', library: 'MainComponent', path: './build', filename: '[name].js' }, module: { loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader') }] }, plugins: [ new ExtractTextPlugin('styles.css') ] } 

Answer 1

You can use style-loader as the before argument to extract .

Here's the built-in implementation:

  ExtractTextPlugin.extract = function(before, loader, options) { if(typeof loader === "string") { return [ ExtractTextPlugin.loader(mergeOptions({omit: before.split("!").length, extract: true, remove: true}, options)), before, loader ].join("!"); } else { options = loader; loader = before; return [ ExtractTextPlugin.loader(mergeOptions({remove: true}, options)), loader ].join("!"); } }; 

So, the main thing you need to do:

 { test: /\.sass$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css!sass?indentedSyntax=true&sourceMap=true') }, 

if you use, for example, sass .

Answer 2

I did not see an explanation of the reason, so I posted this answer here.

From https://github.com/webpack/extract-text-webpack-plugin#api

ExtractTextPlugin.extract([notExtractLoader], loader, [options]) Creates an extractor loader from an existing loader.

notExtractLoader (optional) the loader (s) that should be used when css is not retrieved (i.e. in> an additional fragment, when allChunks: false)

loader loader (s) that should be used to convert the resource to a css export module.

options

publicPath override the publicPath parameter for this loader.

The #extract method should get a loader that outputs css . What happened was that he was getting a style-loader that outputs javascript code that is designed to be input to a web page. This code will try to access window .

You should not pass the bootloader line from style to #extract . However ... if you set allChunks=false , then it will not create CSS files for non-initial fragments. Therefore, he should know which loader to use to enter the page.

Tip. Webpack is a tool that you really need to understand in depth or you may encounter many strange problems.

Answer 3

Webpack 2

If you are using Webpack 2, this option works:

  rules: [{ test: /\.css$/, exclude: '/node_modules/', use: ExtractTextPlugin.extract({ fallback: [{ loader: 'style-loader', }], use: [{ loader: 'css-loader', options: { modules: true, localIdentName: '[name]__[local]--[hash:base64:5]', }, }, { loader: 'postcss-loader', }], }), }] 

The new extraction method no longer accepts three arguments and is indicated as a change in the gap when switching from V1 to V2.

https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-breaking-change

Answer 4

I figured out a solution to my problem:

Instead of rearranging loaders into each other ( ExtractTextPlugin.extract('style-loader!css-loader') ), you should pass a separate parameter in each loader: ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')