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

Question

I'm using webpack to build my react components and I'm trying to use the extract-text-webpack-plugin to separate my css from my generated js file. However, when I attempt 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 may want to use style-loader as a before argument in extract function.

Here's the native 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 basicaly what you need to do is:

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

if you for example use sass.