Using style-loader with pure V8 engine.

[pauldotknopf]

I am working on a project that uses an embedded V8 engine to render markup (universal rendering). We use webpack to generate the server-side script that will be loaded into the V8 environment.

var styles = require("./containers/App/App.css");
console.log(styles);

We are using this loader.

{ test: /\.css$/, loaders: [ 'style', 'css?modules' ] }

When running the script compiled from webpack in the client, the styles variable get's built correctly with valid properties.

However, when I run that same compiled script inside of my V8 instance, I get some "window" and "document" not defined errors. I would expect there to be support for running the webpack compiled script in a node or V8 environment. The require("./containers/App/Appcss"); winds up returning an empty json object because of the errors.

Is it possible to use style-loader to return a json object representation of the style-sheet only, and not attempt to add styles to the DOM?

[pauldotknopf]

After looking at the source, is it possible to configure web-pack to override the import of the file addStyles.js with something I have locally? This way, I can export a method that does nothing to a DOM/window.

[pauldotknopf]

I was able to fix this by using the extract-text-webpack-plugin for my server script that runs in a pure V8 environment.

[dpwrussell]

I have this exact same problem. Is there any way that it could be fixed in style-loader while leaving the CSS inline?

An example error:

$ node dist/server.js
/Users/dpwrussell/ExampleApp/dist/server.js:25925
            return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
                                       ^

ReferenceError: window is not defined

[JonathanZWhite]

@dpwrussell So I'm running into the same issue trying to achieve universal rendering. I've seen some implementations use the extract-text-webpack-plugin that @pauldotknopf mentioned but looking at this example universal project, it seems like they might have solved this issue a different way?

https://github.com/erikras/react-redux-universal-hot-example

[JonathanZWhite]

@dpwrussell Actually, search the code, it seems that they do use the extract-text-webpack-plugin.

https://github.com/erikras/react-redux-universal-hot-example/blob/615dfcd2562b8380e1d199b3d840d292358198dc/webpack/prod.config.js#L37

[dpwrussell]

@JonathanZWhite Yeah, I have that in place as a temporary solution, but would prefer not to!

[pauldotknopf]

Hey guys, I figured out how this is too be done correctly.

Use 'css/locals?module', as demonstrated here.

For the client, just use 'css?modules'.

[dpwrussell]

@pauldotknopf I don't see how that solves the problem, if I do that then my app will just not have any styles as they are not included in the javascript, nor are they built into a standalone CSS file like they would be with extract-text-webpack-plugin.

I could of course use css/locals in conjunction with extract-text-webpack-plugin, but that is what I am trying to avoid.

[pauldotknopf]

This discussion is about using a V8 engine, which is essentially server-side rendering. The server-side script, you will use css/locals?module, and it will not touch a non-existent window object.

Then, use css?modules for your script that will be delivered to the client to get your outputted css.

You have to generate two separate scripts. One for server rendering, and one for client rendering.

[JonathanZWhite]

@dpwrussell I think @pauldotknopf might have a point. Taking a quick look at the webpack config he linked, it seems they have one config for their server and one for their client.

Personally, I resolved it by looking at isomorphic-flux-boilerplate. So it's not super clean but they have an global variable Browser that determines whether not to require their css.

This approach helped me understand how some people are doing it. For actual implementation detail, I look at https://github.com/erikras/react-redux-universal-hot-example. It seems like they define a global global.__CLIENT__ = false server-side. Then they update the global with Webpack here.

Edit: Also take a look at this Github issue webpack-contrib/sass-loader#157

[dpwrussell]

I do have two configurations, one for the client and one for the server. The client is fine and the css is included in the javascript and loaded with require.

The server-build with css/locals would not have styles in javascript or in a separate file, so how could it possibly render correctly? It's easy to test this simply by disabling the client side portion of an isomorphic app.

The reason that @pauldotknopf example works is because the client part of the build uses extract-text-webpack-plugin and then that built style file is referenced by the server code. I don't think this is any different from using extract-text-webpack-plugin in the server build itself.

[pauldotknopf]

Yes, it is assumed that you are using an external css. How do you expect the server to render css with a full GET HTML request? Embedded into a <style></style> tag? I wouldn't recommend that. Just leave the style as an external css. Doing otherwise feels like we are going against the grain.

[dpwrussell]

Yes, that was pretty much my point.

I have just come across this, which is along the lines I was imagining: https://github.com/halt-hammerzeit/webpack-isomorphic-tools, but it seems extremely complex.

[BaoDelta]

I think this issue is the same as #109. My workaround there is using https://github.com/kriasoft/isomorphic-style-loader and just replace loaders: 'style-loader!...' by loaders: 'isomorphic-style-loader!...'

[tarikjn]

This is not complete or production ready, as we released it just a few days ago, but might interest you: https://github.com/iheartradio/node-style-loader it behaves like style-loader but for the server-side (while isomorphic-style-loader differs)

[michael-ciniawsky]

style-loader's main propose is to add <style></style> to the DOM, please use extract-text-plugin or any other 3rd party solution proposed in this post. PR is welcome, otherwise this doesn't have priority atm