templates/ReactReduxSpa uses ExtractTextPlugin in development mode

[stephtr]

The ReactReduxSpa template uses the ExtractTextPlugin in production AND development, while the ReactSpa template uses it only in production, which enables HMR for css files.
Is that behaviour intended or can ReactReduxSpa be fixed?

By the way: Wouldn't it be useful to include postcss-cssnext in the templates by default? - discussed in #315

[SteveSandersonMS]

This behaviour is intended: using style-loader is great in development for enabling HMR, but it isn't compatible with server-side prerendering, which ReactReduxSpa does but ReactSpa does not. Hence the difference.

In production, both of them use ExtractTextPlugin as it produces the most robust, performant result.

[stephtr]

Thank you for the information!
However wouldn't it be more useful to go without server-side style prerendering but having HMR for styles in Development and testing prerendering in Staging?

[SteveSandersonMS]

If you mean turning off server-side prerendering during development but enabling it in production, I'd strongly caution against that. There are many things that can behave differently or break when they run on the server vs on on the client (e.g., if you reference window). It would be extremely dangerous if you weren't trying that out in development and just assumed it would work when you deployed to production.

[stephtr]

In my environment I use the ReactReduxSpa template together with the style-loader in Development and ExtractTextPlugin in Staging and Production.
In Development server-side prerendering still works, Redux uses that result and the css-files get injected via the client script bundle (therefore it also fails, if, for example, I reference window or if there is a mismatch between the server-side rendered state and the local state). The only issue is that if I disable JS on the client, the prerendered HTML gets displayed without stylesheets. But if I want to explicitly view the output of the server-side prerendering I could still temporarily include the css-bundle.

[DanHarman]

@stephtr How did you get style-loader working with SSR? I just tried it and got this:

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: window is not defined

Which is presumably the problem @SteveSandersonMS was alluding to.

[stephtr]

Usually the server bundle doesn't need to contain any CSS (this could be different when using CSS modules) and no style-loader. As soon as the client loads the client bundle including the style-loader the CSS gets automatically injected. (In production the CSS still gets extracted while building the client bundle.)
Therefore I added the following rule for the server bundle: { test: /\.css$/, use: 'ignore-loader' } (and added the corresponding npm module).

I will upload the modifications necessary when I'm at home (in a few hours).

[DanHarman]

@stephtr Thanks - will be interested to see the changes. I think I'm probably out of luck though as I'm using the antd framework with their babel-plugin-import which seems to pull styles in, in such a way that I've had to move my css-loader into the sharedConfig section to work. I'm also using css-modules on my own code...

[stephtr]

stephtr/JavaScriptServices

Your error is probably that you included the style-loader in the server bundle.

[DanHarman]

@stephtr Thanks a lot for taking the time to do that. I will give it a shot, will be interesting to see if I can get away without the css on the server build despite using https://github.com/ant-design/babel-plugin-import.

[DanHarman]

@stephtr Removing the css loaders and using the ignore-loader is great - sped up my build for a start!

edit: oops I've got no css for the server side rendered stuff. I think I need reread this thread and your example properly :)

[stephtr]

Ignoring the CSS files does not work for CSS modules. In that case you have to use css-loader/locals.
I made small changes to the webpack configuration, now the template works fine with CSS modules (even though combining it with Bootstrap is syntactically suboptimal), in development & production, while rendering at the server & client.