This repository was archived by the owner on Apr 8, 2020. It is now read-only.
Repository navigation
This repository was archived by the owner on Apr 8, 2020. It is now read-only.
templates/ReactReduxSpa uses ExtractTextPlugin in development mode #681
Description
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
Activity
SteveSandersonMS commentedon Feb 21, 2017
This behaviour is intended: using
style-loaderis 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
ExtractTextPluginas it produces the most robust, performant result.stephtr commentedon Feb 21, 2017
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 commentedon Feb 21, 2017
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 commentedon Feb 21, 2017
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 commentedon Jun 1, 2017
@stephtr How did you get style-loader working with SSR? I just tried it and got this:
Which is presumably the problem @SteveSandersonMS was alluding to.
stephtr commentedon Jun 1, 2017
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 commentedon Jun 1, 2017
@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 commentedon Jun 1, 2017
stephtr/JavaScriptServices
Your error is probably that you included the style-loader in the server bundle.
DanHarman commentedon Jun 5, 2017
@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 commentedon Jun 9, 2017
@stephtr Removing the css loaders and using the
ignore-loaderis 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 commentedon Jun 18, 2017
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.