Microfrontend: cannot find module or its corresponding type declarations in dynamic import - micro-frontend

Question

The TS compiler complains about the following code snippet:
import('HelloWorldApp/HelloWorldButton')
.then(HelloWorldButtonModule => {
const HelloWorldButton = HelloWorldButtonModule.default;
const helloWorldButton = new HelloWorldButton();
helloWorldButton.render();
});
this: Cannot find module 'HelloWorldApp/HelloWorldButton' or its corresponding type declarations.
Tried adding declare module 'HelloWorldApp/HelloWorldButton' to a declaration.d.ts file specified in tsconfig.json but to no avail.
How do I fix it?

Answer 1

//types.d.ts inside src folder
declare module 'host/NewComponent'
module type declaration problem solved by types.d.ts
Please take look properly on config file for host project .
I was facing same issues then I used -
optimization:{
splitChunks: false,
}
you will find optimization on vue.config.js file of host project
take a look into the config files -
//*vue.config.js* for host project
const { defineConfig } = require('#vue/cli-service')
const ModuleFederationPlugin =
require("webpack").container.ModuleFederationPlugin;
module.exports = defineConfig({
publicPath:"http://localhost:8000/",
configureWebpack: {
plugins: [
new ModuleFederationPlugin({
name: "host",
filename: "remoteEntry.js",
exposes: {
"./NewComponent": "./src/components/NewComponent.vue",
},
}),
],
optimization:{
splitChunks: false,
}
},
devServer: {
port: 8000,
},
});
Though version doesn't matter here but I want to inform you that I'm using vue 3 .
//vue.config.js for consumer project
const { defineConfig } = require('#vue/cli-service')
const ModuleFederationPlugin =
require("webpack").container.ModuleFederationPlugin;
module.exports = defineConfig({
publicPath:"http://localhost:8001/",
configureWebpack: {
plugins: [
new ModuleFederationPlugin({
name: "consumer",
remotes: {
host: "host#http://localhost:8000/remoteEntry.js",
},
}),
],
},
devServer: {
port: 8001,
},
});
And Finally I used the component from host in consumer project.
//HelloWorld.vue component in consumer project
<template>
<div>
<otherComp></otherComp>
</div>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue';
const otherComp = defineAsyncComponent(() => import("host/NewComponent"));
export default defineComponent({
name: 'HelloWorld',
components:{
otherComp,
},
props: {
msg: String,
}
});
</script>
****Everything is works fine for me .Hoping it will also solve your and others problem to build micro front end . Happy Coding ****