Bug report
What is the current behavior?
when change code to refer a module from remoteEntry, the generated hot-update.js throw an error __webpack_modules__ is not defined
Remote provide remote module Button and Heading for consume.:
module.exports = {
//...
plugins: [
new ModuleFederationPlugin({
name: 'remote',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/Button',
'./Heading': './src/Heading',
},
remotes: {
libs: 'libs@[libsUrl]/remoteEntry.js',
},
}),
//...
],
};Remote Module federation has been compiled successfully.
Host consume remote and worked with HMR:
module.exports = {
//...
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
remote: 'remote@[remoteUrl]/remoteEntry.js',
libs: 'libs@[libsUrl]/remoteEntry.js',
},
}),
new ExternalTemplateRemotesPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html',
chunks: ['main'],
}),
new ReactRefreshWebpackPlugin({
exclude: [/node_modules/, /bootstrap\.js$/],
}),
],
};
- The Async Chunk entry `import('./lazyHeadIng') in react-hmr/host/src/App.js
- The Async Chunk
lazyHeadIng is react-hmr/host/src/lazyHeadIng.js
when add remote module code to lazyHeadIng as below:
import Heading from 'remote/Heading';
console.log("-> Heading", Heading);
export default <Heading />the code trigger HMR and browser download main.af01145017c5a662d467.hot-update.js
"use strict";
self["webpackHotUpdateremote1"]("main",{},
/******/ function(__webpack_require__) { // webpackRuntimeModules
/******/ /* webpack/runtime/getFullHash */
/******/ (() => {
/******/ __webpack_require__.h = () => ("06a8b92c17c93dee1b1d")
/******/ })();
/******/
/******/ /* webpack/runtime/remotes loading */
/******/ (() => {
/******/ var chunkMapping = {
/******/ "src_bootstrap_js": [
/******/ "webpack/container/remote/libs/react",
/******/ "webpack/container/remote/libs/react-router-dom",
/******/ "webpack/container/remote/libs/react-dom"
/******/ ],
/******/ "webpack_container_remote_remote_Button": [
/******/ "webpack/container/remote/remote/Button"
/******/ ],
/******/ "src_lazyHeadIng_js": [
/******/ "webpack/container/remote/remote/Heading"
/******/ ]
/******/ };
/******/ var idToExternalAndNameMapping = {
/******/ "webpack/container/remote/libs/react": [
/******/ "default",
/******/ "./react",
/******/ "webpack/container/reference/libs"
/******/ ],
/******/ "webpack/container/remote/libs/react-router-dom": [
/******/ "default",
/******/ "./react-router-dom",
/******/ "webpack/container/reference/libs"
/******/ ],
/******/ "webpack/container/remote/libs/react-dom": [
/******/ "default",
/******/ "./react-dom",
/******/ "webpack/container/reference/libs"
/******/ ],
/******/ "webpack/container/remote/remote/Button": [
/******/ "default",
/******/ "./Button",
/******/ "webpack/container/reference/remote"
/******/ ],
/******/ "webpack/container/remote/remote/Heading": [
/******/ "default",
/******/ "./Heading",
/******/ "webpack/container/reference/remote"
/******/ ]
/******/ };
/******/ __webpack_require__.f.remotes = (chunkId, promises) => {
/******/ if(__webpack_require__.o(chunkMapping, chunkId)) {
/******/ chunkMapping[chunkId].forEach((id) => {
/******/ var getScope = __webpack_require__.R;
/******/ if(!getScope) getScope = [];
/******/ var data = idToExternalAndNameMapping[id];
/******/ if(getScope.indexOf(data) >= 0) return;
/******/ getScope.push(data);
/******/ if(data.p) return promises.push(data.p);
/******/ var onError = (error) => {
/******/ if(!error) error = new Error("Container missing");
/******/ if(typeof error.message === "string")
/******/ error.message += '\nwhile loading "' + data[1] + '" from ' + data[2];
/******/ __webpack_modules__[id] = () => {
/******/ throw error;
/******/ }
/******/ data.p = 0;
/******/ };
/******/ var handleFunction = (fn, arg1, arg2, d, next, first) => {
/******/ try {
/******/ var promise = fn(arg1, arg2);
/******/ if(promise && promise.then) {
/******/ var p = promise.then((result) => (next(result, d)), onError);
/******/ if(first) promises.push(data.p = p); else return p;
/******/ } else {
/******/ return next(promise, d, first);
/******/ }
/******/ } catch(error) {
/******/ onError(error);
/******/ }
/******/ }
/******/ var onExternal = (external, _, first) => (external ? handleFunction(__webpack_require__.I, data[0], 0, external, onInitialized, first) : onError());
/******/ var onInitialized = (_, external, first) => (handleFunction(external.get, data[1], getScope, 0, onFactory, first));
/******/ var onFactory = (factory) => {
/******/ data.p = 1;
/******/ __webpack_modules__[id] = (module) => {
/******/ module.exports = factory();
/******/ }
/******/ };
/******/ handleFunction(__webpack_require__, data[2], 0, 0, onExternal, 1);
/******/ });
/******/ }
/******/ }
/******/ })();
/******/
/******/ }
);
//# sourceMappingURL=main.af01145017c5a662d467.hot-update.js.mapthrow errors
remotes loading:76 Uncaught (in promise) ReferenceError: __webpack_modules__ is not defined
at onFactory (remotes loading:76:1)
at remotes loading:63:1
at async Promise.all (:3000/index 0)ReferenceError
__webpack_modules__ is not defined
Call Stack
onFactory
main.af01145017c5a662d467.hot-update.js:86:15
undefined
main.af01145017c5a662d467.hot-update.js:73:51
If the current behavior is a bug, please provide the steps to reproduce.
GitHub repository to reproduce
What is the expected behavior?
HMR work fine when dynamically add a module federation code to async chunk;
Other relevant information:
webpack version: 5.70.0
Node.js version: 14
Operating System: Mac OS
Additional tools: yarn
Bug report
What is the current behavior?
when change code to refer a module from remoteEntry, the generated hot-update.js throw an error
__webpack_modules__ is not definedRemote provide remote module
ButtonandHeadingfor consume.:Remote Module federation has been compiled successfully.
Host consume remote and worked with HMR:
lazyHeadIngis react-hmr/host/src/lazyHeadIng.jswhen add remote module code to
lazyHeadIngas below:the code trigger HMR and browser download main.af01145017c5a662d467.hot-update.js
throw errors
If the current behavior is a bug, please provide the steps to reproduce.
GitHub repository to reproduce
What is the expected behavior?
HMR work fine when dynamically add a module federation code to async chunk;
Other relevant information:
webpack version: 5.70.0
Node.js version: 14
Operating System: Mac OS
Additional tools: yarn