faceyspacey/redux-first-router

webpack.optimize.AggressiveMergingPlugin() and Unable to find

Closed this issue · 9 comments

I was playing around with my production build and discovered that with the last version of RFR (from rudy), I get a lot of Unable to find ... in Webpack chunks. Please check usage of Babel plugin. when the AggressiveMergingPlugin is present in my plugins declaration.
Removing it fixes the issue.

We now know that AggressiveMergingPlugin do things on our chunks and webpack flush chunks is not able anymore to load files that do not exist (as they have been merged).
I don't know how to look at this issue.
On the first hand, we want dynamic code splitting, so no merging.
On the other hand, for foundation code, we want merging for reducing the number of files/lines.

Before Rudy, it was working very well with AggressiveMergingPlugin.
If anyone has recommendations on this issue, it is welcome.

This looks like it is where the message comes from: https://github.com/faceyspacey/webpack-flush-chunks/blob/3bcf73a158183b2569688f47f3f9bffe8aaabf25/src/flushChunks.js#L214-L216, so I'm assuming this error is happening on the server side?

Not sure if its related, but I found that when using LimitChunkCountPlugin, webpack would ignore the entry chunk names and instead pick the shortest chunk name: webpack/webpack#7516 (fixed in webpack 4.23.0). Have you checked that the webpack compilation output shows the chunk names you expect? Are the stats from the client compilation being correctly made available to webpack flush chunks?

Maybe @ScriptedAlchemy would have a clearer idea what the problem might be

Hello @hedgepigdaniel, thank you for your response.
Yes the error is happening on the server side, sorry for forgetting to mention that.
I've just tested with the 4.23.0 version of webpack, and still have the issue. Same with 4.24.0.

Indeed the files generated by webpack are not what I'm expecting for the client part (listed in the compiltation output).
The stats.json correctly has the keys related to the chunks I want. That's why the warning occurs from Flush Chunks.

I think AggressiveMergingPlugin is "too" agressive when merging chunks.
But I still don't understand why it was working correctly before.

In the output object of webpack config, remove the [name] just use the hash as the name. Simple but works. Otherwise check the docks on the babe plugin and react universal component

This appears to be related to universal and ruc. Check the option called, ignore bable rename there's also a note on the Babel plugin

Will try, but just discovered issue has been discussed here : faceyspacey/webpack-flush-chunks#39

I already have ignoreBabelRename: true in all my universal loading components by the way.
Removing [name] and only using [hash] did not solve the issue.

Remove namedmodulesplugin or try hashed modules plugin

If you through a prop I can try to find the issue

Why closing this issue?