Work with async CommonsChunkPlugin

[joaovieira]

Thought I'd ask this here as I can't seem to find a solution anywhere.

Here's my goal:

• 1 vendor bundle
• 1 entry bundle + CSS
• multiple async chunks + CSS
• 1 common async chunk with common code form all async chunks + CSS

All of the Webpack output is correct as seen below (there's also a CSS chunk for each chunk):

All the async chunks are loaded nicely together with the CSS chunk using babel-dual-import.

The problem arrises with the common chunk. It is created via CommonsChunkPlugin, which adds the dynamic import logic itself (i.e. there's no import()), hence it doesn't load the corresponding CSS for that common chunk.

Is there any way around this? How to import the css for an automatically generated async chunk?

[faceyspacey]

The solution is to override the generated chunks manually to include the async chunks if one of the chunks that goes along with it is present. That's the best we have been able to come up with. Somewhere around here or the other universal packages is an issue showing what someone else did.

[joaovieira]

@faceyspacey I've been searching for a while in all the related repos (react-universal-component, flush-chunks, universal-demo, extract-text-plugin, dual-import, universal-import) and couldn't find it. Do you have any other clue? Also, not sure I understood that solution summary. How and where to override? Post-build, coding in the fetch request?

[faceyspacey]

Basically you get an array of scripts from flushChunks right. So you can look into the scripts and see the names of what you received, and if one of those names requires an async chunk, you can push that async chunk's name on to the array before rendering the array to HTML.

As far as client-side dynamic imports on user navigation, I forget what the solution was. There might not have been one.

The previous issue was in babel-plugin-universal-import or webpack-flush-chunks. But basically I don't think we have a satisfactory solution for ya here.

[faceyspacey]

maybe this helps:

faceyspacey/webpack-flush-chunks#21

[faceyspacey]

the other part of the solution would be PRing this file:

https://github.com/faceyspacey/babel-plugin-universal-import/blob/master/importCss.js#L32

to Promise.all request an array of css files in the cssHash. I think i mention that in the above issue. That wouln't solve async common chunks of js--but is webpack handling that?