webpack
After turning on lazyCompilation, the first load of externals will fail
Bug report
Enable lazyCompilation, and because of the micro frontend, I need to set output.library.type to umd. At this time, an error will appear during the first load. After refreshing the page again, it will become normal.
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce.
https://github.com/nanianlisao/webpack-repoduce
Run the following command:
pnpm i pnpm run dev
What is the expected behavior?
no mistakes
Other relevant information: webpack version: 5.97.1 Node.js version: 18.17.0 Operating System: Additional tools:
The reason is that, external modules should only be present in the main chunk, not async chunks, normally this is done by a plugin called EnsureChunkCondition.
However hot update chunk is a special case, imaging that we don't have any external module in the first build, but we import an external module in the second build, we should indeed insert external module into al modules, so the external module should be placed in hot update chunk, but it can't as it is an external module which cannot be present at async chunks
The temporary solution is that reload the page. Once reload, the browser fetch the new main chunk which contains updated external modules.
When building an asynchronous chunks, external modules need to be imported, and the contents of the main chunk will be updated. So, can’t the browser actively notify the update of the main chunk to reload?
So, can’t the browser actively notify the update of the main chunk to reload?
Yeah, that's exact way that I want to solve this for now, when external modules present at async chunks, notify browser to reload
If you are using Webpack 5, setting libraryTarget: "umd" might help instead of library.type: "umd".
@JSerFeng Have you tried to solve this yet? If not, I will look, just to not waste time if someone is already working on it.
No, I just found the reason but do not know how to better fix this, not familiar with hmr part T-T
solution for this in my mind is implement a option where they can consider the to make the external module for lazy condition and other might be implementing force reload of browser so it can include that in main chunk any opinions on implementing this
yupp you can contribute you can check previous prs and then makeout your solution
We only generate the UMD wrapper for entry chunk. If UMD output is intended for micro-frontend (e.g., Qiankun), I recommend setting externalTypes: 'global' | 'window' | 'var' as a workaround.
