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, wh

Answer 1

Didn't see an explanation of the cause so I have posted this answer here.

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

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

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

loader the loader(s) that should be used for converting the resource to a css exporting module.

options

publicPath override the publicPath setting for this loader.

The #extract method should receive a loader that outputs css. What was happening was that it was receiving a style-loader which outputs javascript code, which is intended to be injected into a webpage. This code would try to access window.

You should not pass a loader string with style to #extract. However...if you set allChunks=false, then it will not build CSS files for non-initial chunks. Therefore it needs to know what loader to use to inject into the page.

Tip: Webpack is a tool that really needs to be understood in-depth or you can run into lots of strange issues.