search

ScriptedAlchemy / webpack-external-import

Dynamically import modules from other webpack bundles. Painless code sharing between separate apps
BSD 3-Clause "New" or "Revised" License
415 stars 42 forks source link

ChunkLoadError when service prod resources #109

Closed obfu5c8 closed 4 years ago

obfu5c8 commented 4 years ago

After stumbling across this plugin via your MicroFrontEnd Architecture article i've been playing around with it for my build and had it working very successfully while both apps were running inside webpack-dev-server.

Its a very simple setup, App (A) dynamically loads a single react component from App (B).

I then did a full prod build (B) and served the dist folder locally with the npm serve package. After switching the import url in (A) to point at (B)'s dist server, the import started throwing a ChunkLoadError at bootstrap:259 (inside the onScriptComplete function).

I can see in the network logs that both the importManifest.js and the chunk file itself have been loaded into the browser successfully, so I'm totally lost as to why there's a behaviour change.

Any suggestions on what to poke next?

ScriptedAlchemy commented 4 years ago

Try loading only one component at a time. I’m working out race conditions in tree shaken envs - got it working today, just need to repack it into the plugin. If you reload the page. Does it show up?

ScriptedAlchemy commented 4 years ago

So what’s going on is that when your chunk needs more dependencies, it recursively Calls require.interleave, however how it watches for code to be installed is a little different than what I need for nested deps. So everything ends up resolving before the chunk totally done installing.

When running multiple interleaved files at one in parallel. They all write to the same queue. The recursive function doesn’t handle child calls correctly when there’s multiple and duplicates. In prod mode. Mostly because of scope changes and optimization.

ScriptedAlchemy commented 4 years ago

So the working solution I have is to loop and return an array of promises for each nested chain. Then wait for those to resolve and be installed by webpack before resolving the parents and checking they are installed.

ScriptedAlchemy commented 4 years ago

The file gets there but webpack is still registering the chunk modules. It resolves a little too soon. So it appears as if it should work. All resources are there. Yet one loop is still running for a few ms longer.

It’s hard to connect all the dots because of how templates are written. So I’m writing strings. Found this issue yesterday when I started working on tree shakes. Follow me on twitter or watch the repo. I’ll have a release soon

ScriptedAlchemy commented 4 years ago

@obfu5c8 this fixes it https://github.com/ScriptedAlchemy/webpack-external-import/pull/111

Working on some cleanup and will release in a few days. Need to validate the rewrite still handles errors as expected