[Bug]: Instance not found error in dev mode #396
Description
Describe the bug
HI,
I have a very simple vite app, in which index.html is having bootstrap.js loaded
bootstrap.js:
(async () => {
await import('./main.js');
})();
main.js
import { loadRemote, registerRemotes } from '@module-federation/enhanced/runtime';
registerRemotes([
{
entry: "http://localhost:4174/remoteEntry.js",
entryGlobalName: "my-vite-mfe",
name: "my-vite-mfe",
shareScope: "default",
type: "module"
}
]);
async function loadMFERemote() {
const mfeModule = await loadRemote('my-vite-mfe/dynamic');
const mfeDynamicElement = document.createElement('p');
mfeDynamicElement.textContent = `MFE says: ${mfeModule.dynamicContent}`;
document.querySelector('#app').appendChild(mfeDynamicElement);
}
loadMFERemote();
vite.config.js
import { defineConfig } from 'vite'
import { federation } from '@module-federation/vite'
// https://vitejs.dev/config/
export default defineConfig({
server: {
port: 4173, // optional: change the dev port
open: true, // automatically open browser
},
base: './', // important for correct asset paths in production
build: {
outDir: 'dist', // output folder for production build
sourcemap: true, // helpful for debugging,
minify: false
},
plugins: [
federation({
name: 'my-vite-app',
dts: false,
shared: {
react: {
singleton: true,
requiredVersion: "^18.2.0 || ^19.0.0",
strictVersion: false
},
'react-dom': {
singleton: true,
requiredVersion: "^18.2.0 || ^19.0.0",
strictVersion: false
},
'react-dom/client': {
singleton: true,
requiredVersion: "^18.2.0 || ^19.0.0",
strictVersion: false
},
'react/jsx-runtime': {
singleton: true,
requiredVersion: "^18.2.0 || ^19.0.0",
strictVersion: false
},
'react/jsx-dev-runtime': {
singleton: true,
requiredVersion: "^18.2.0 || ^19.0.0",
strictVersion: false
}
},
}),
],
})
This works most of the times, some times it fails.
MyObservation:
I see this
<!doctype html>
<html lang="en">
<head><script type="module" src="/DCP-Nextgen/Learnspace/Vite/my-vite-app/node_modules/__mf__virtual/my_mf_2_vite_mf_2_app__H_A_I__hostAutoInit__H_A_I__.js"></script>
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my-vite-app</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/bootstrap.js"></script>
</body>
</html>
the hostinit.js is loading the remoteEntry-[hash] file and if it taking time to complete, if the main.js is loaded, then it tries to create the registerRemotes, which is throwing the below error.
This happens only a few times, majority it works. But with build and preview it works, not sure if it also fails here
"devDependencies": {
"vite": "^7.1.7"
},
"dependencies": {
"@module-federation/enhanced": "^0.23.0",
"@module-federation/vite": "^1.11.0",
"react": "^19.2.0",
"react-dom": "^19.2.0"
}
Version
7.1.7
Reproduction
NA
Relevant log output
bootstrap.js:10 Uncaught (in promise) Error: [ Federation Runtime ]: Please call createInstance first. #RUNTIME-009
View the docs to see how to solve: https://module-federation.io/guide/troubleshooting/runtime/RUNTIME-009
at error2 (chunk-OJZUHJT4.js?v=dc3a14db:1012:13)
at Object.assert2 [as assert] (chunk-OJZUHJT4.js?v=dc3a14db:1002:9)
at registerRemotes (chunk-OJZUHJT4.js?v=dc3a14db:3940:19)
at main.js:4:3Validations
- Read the docs.
- Read the common issues list.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.