code splitting messes up the snapshots

[diligiant]

I tried react-snap on a code-splitted create-react-app project (using react-loadable but that's not the issue). Once deployed, the browser started to complain as it didn't know what to do with

<link type="text/css" rel="stylesheet" href="blob:http://localhost:45678/fd887ea6-961a-4721-8a91-a7a08223b642">

The explanation is just above style-loader#useable : If sourcemaps are not turned off (which gaearon usually advices against style-loader fetches the splitted styles this way.

[stereobooster]

As far as I understand it there is core incompatibility with style-loader - blobs will not work. You need to create blob object first in JS and only after this you can use it

[diligiant]

An easy workaround, that puts the styles inline, is to add GENERATE_SOURCEMAP=false to env before building but this complicates the build process.

[stereobooster]

Not sure I understand the issue. Why it uses blob in production build and not generates css files?

[diligiant]

because you usually want sourcemaps even in production builds to be able to debug then. You can't have sourcemaps AND inline.

[stereobooster]

But how react-snap relates to sourcemaps? It runs production build js and saves html - unless you have error it should not touch sourcemaps.

As far as I know sourcemaps inserted this way:

//# sourceMappingURL=<actual url or base64 data url>

so I can not see how this relates to blobs

<link type="text/css" rel="stylesheet" href="blob:http://localhost:45678/fd887ea6-961a-4721-8a91-a7a08223b642">

I do not understand the issue

[diligiant]

If code-splitting and sourcemaps are "on", when a browser (headless chrome for ex) renders the page, styleloader.updateLink appends several <link href="blob:https://…> to head.

These are complete URLs with the hostname (localhost when rendered for react-snap) which is a problem for react-snap's purpose. I'll check what genuine SSR does. The solution probably lies there.

[stereobooster]

So it has nothing to do to sourcemaps. What you described is some kind of css-in-js solution. Right?

css-in-js means that you have those beats in JS. Is it true? My approach here is to remove css-in-js artifacts from final snapshot (you have copy in JS bundle anyway). There is an option to remove styleTags from final snapshots, we can do same for <link href="blob:

[diligiant]

Yes it does ;) If you have code-splitting AND sourcemaps, then you see this "blob" behavior.

No, I don't have css-in-js but when code-splitting is activated, webpack does a lot of weird things when creating the different chunks.

Thank for the tip. I'll try that.

[stereobooster]

I'm afraid I won't be able to help you more without example

[diligiant]

@stereobooster You've done a lot. I'll get back to you after following some of your leads.

[diligiant]

Short explanation/solution if anyone ends up here with the same problem:
When you enable code splitting, style-loader will pack the module's css in a function in the each chunk. Upon module load, it either inserts the css inline (no sourcemap) or refers to it with a blob link, the latter breaking react-snap purpose.

For now, until webpack creates css chunks – new css workflow, you can either turn style-loader sourcemaps off (-> css in a function in each chunk) or add allChunks: true to ExtractTextPlugin options (-> application-wide css in the main css file).