Add usage for server side rendering?

[Exegetech]

Hello,

I am trying to use postcss but with server side rendering by using webpack-isomorphic-tools. After talking to halt-hammerzeit, he mentioned that postcss-loader added the window in the code.

How do I work around this?

here is the link to the issue https://github.com/halt-hammerzeit/webpack-isomorphic-tools/issues/14#issuecomment-152833758

[require-hook] [debug] Loading source code for /Users/christiansakai/Desktop/overreact/common/components/Todo/Filter/Filter.css
[webpack-isomorphic-tools] [debug] require() called for /Users/christiansakai/Desktop/overreact/common/components/Todo/Filter/Filter.css
[webpack-isomorphic-tools] [debug]  requiring ./common/components/Todo/Filter/Filter.css
[require-hook] [debug] Loading source code for !!./../../../../node_modules/css-loader/index.js!./../../../../node_modules/postcss-loader/index.js!./Filter.css.webpack-module
[require-hook] [debug] Loading source code for ./../../../../node_modules/css-loader/lib/css-base.js.webpack-module
[require-hook] [debug] Loading source code for !./../../../../node_modules/style-loader/addStyles.js.webpack-module
!./../../../../node_modules/style-loader/addStyles.js.webpack-module:14
                return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
                                           ^

ReferenceError: window is not defined
    at !./../../../../node_modules/style-loader/addStyles.js.webpack-module:14:30
    at !./../../../../node_modules/style-loader/addStyles.js.webpack-module:9:47
    at module.exports (!./../../../../node_modules/style-loader/addStyles.js.webpack-module:30:68)
    at Object.<anonymous> (/Users/christiansakai/Desktop/overreact/common/components/Todo/Filter/Filter.css:7:78)
    at Module._compile (module.js:434:26)
    at Object._module3.default._extensions.(anonymous function) [as .css] (/Users/christiansakai/Desktop/overreact/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/tools/require hacker.js:229:11)

import WebpackIsomorphicToolsPlugin from 'webpack-isomorphic-tools/plugin'

export default {
  debug: true,
  assets: {
    styles:
    {
      extension: 'css',
      filter: WebpackIsomorphicToolsPlugin.style_loader_filter,
      path: WebpackIsomorphicToolsPlugin.style_loader_path_extractor,
      parser: WebpackIsomorphicToolsPlugin.css_modules_loader_parser
    },
    //css: {
    //  extensions: ['css'],
    //  parser: WebpackIsomorphicToolsPlugin.css_loader_parser // see Configuration and API sections for more info on this parameter
    //},
    images: {
      extensions: ['png', 'jpg', 'gif', 'ico', 'svg'],
      parser: WebpackIsomorphicToolsPlugin.url_loader_parser // see Configuration and API sections for more info on this parameter
    }
  }
}

[ai]

The problem is that you use style-loader, which add JS code to insert <style>you CSS content</style>. You can use ExtractTextPlugin to extract that CSS from JS to separated file.

Anyway, sorry but it is not relative with PostCSS :-P.

[Exegetech]

ah I see. thanks for the clarification!

[sompylasar]

Looks related: https://github.com/kriasoft/isomorphic-style-loader

[sergeylukin]

This may be helpful too: http://stackoverflow.com/questions/28223040/window-not-defined-error-when-using-extract-text-webpack-plugin-react