css-modules / webpack-demo

Working demo of CSS Modules, using Webpack's css-loader in module mode
https://css-modules.github.io/webpack-demo/
1.49k stars 180 forks source link

ReferenceError for console and window objects #2

Closed pe3 closed 9 years ago

pe3 commented 9 years ago

Great demo! I get errors which I don't understand when I add browser related Objects to index.js

  1. I run the demo with npm start
  2. If I add window.React = React; to src/index.js I get this error:
webpack: bundle is now INVALID.
evalmachine.<anonymous>:80
    console.log('hello');
    ^
ReferenceError: console is not defined
    at Object.<anonymous> (evalmachine.<anonymous>:80:2)
    at __webpack_require__ (evalmachine.<anonymous>:30:30)
    at Object.defineProperty.value (evalmachine.<anonymous>:50:18)
    at evalmachine.<anonymous>:53:10
    at webpackUniversalModuleDefinition (evalmachine.<anonymous>:3:20)
    at evalmachine.<anonymous>:10:3
    at ContextifyScript.Script.runInNewContext (vm.js:18:15)
    at module.exports (/private/tmp/webpack-demo/node_modules/react-to-html-webpack-plugin/node_modules/eval/eval.js:56:8)
    at ReactToHtmlWebpackPlugin.<anonymous> (/private/tmp/webpack-demo/node_modules/react-to-html-webpack-plugin/index.js:21:23)
    at Tapable.applyPluginsAsync (/private/tmp/webpack-demo/node_modules/webpack/node_modules/tapable/lib/Tapable.js:71:13)

Adding console.log('hello'); causes a similar error. What might cause this?

I'm asking because I would like to use this demo as a base for a project.

pe3 commented 9 years ago

Now I get it. From react-to-html-webpack-plugin:

Warning! This plugin executes your code in a Node context after each compilation.

So this can be avoided with:

if (typeof window !== 'undefined') {
  console.log('hello');
}

I didn't get window.React to work but I may be some other issue.