I'm working with two React projects (Host and Remote1) using Create React App (CRA) and Webpack Module Federation, but I'm encountering a chunk loading error. Both projects are configured with customize-cra and react-app-rewired for custom configuration. The Host exposes two modules (AuthProvider and preventCSSCollision), and Remote1 is set to only share itself.
Issue:
Loading a chunk from the standalone Remote1 component throws an error, while it works fine within the Host. The error message is related to loading a specific chunk file (e.g., vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_css-loader_dist_runtime_sour-d924d0.chunk.js).
Attempts:
Setting config.output.publicPath = '/' ensures the Host application works correctly, but standalone Remote applications throw errors. Setting config.output.publicPath = 'auto' allows sub-routes of the remote component on the Host to function, but refreshing these pages results in failures. Attempts to set config.output.publicPath dynamically using webpack_public_path = window.location.origin + '/' have been unsuccessful. I've tried adding a static tag in the head section of Remote1's HTML file, but it didn't resolve the issue and might affect internal URL handling.
Expected Behavior:
Host and Remote1 should load standalone without errors. Browsing and refreshing Remote1 application sub-routes on the Host should work seamlessly. Any suggestions or insights on how to resolve this would be greatly appreciated!
Git Repo demostrates the problem: