Encountering an issue with a new webpack 5 module Federation and TypeScript. I have two separate VueJS applications, both written in VueJS 3. The problem seems to be related to the webpack configuration and the ts-loader, which requires the appendTsSuffixTo option (otherwise, I receive a
Cannot find module '@/App.vue' or its corresponding type declarations.NOTE: This issue only arises when using Vue 3 or the composition API with Vue 2. Vue 2 (without the composition API) works fine with TypeScript.
The Webpack ts-loader setup looks like this:
'babel-loader',
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
},
}
The problem surfaces when utilizing a dynamic federation module:
new ModuleFederationPlugin({
name: 'main-app',
filename: 'remoteEntry.js',
remotes: {
nav: "nav@http://localhost:5000/remoteEntry.js",
},
shared: {
...deps,
vue: {
singleton: true,
requiredVersion: deps.vue
}
}
})
and importing it in my App.vue file:
<template>
<div id="module">
<h2>Main app</h2>
<Header />
</div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
import Header from "nav/Header";
//const Header = () => import("nav/Header"); //The same problem
//const module = "n...émenté...
export default defineComponent({
name: 'App',
components: {
Header
}
})
</script>
This leads to an error being thrown by Webpack:
TS2307: Cannot find module 'nav/Header' or its corresponding type declarations.
Could this be a bug or is there something wrong on my end? Everything seems to work perfectly for Vue 2.x.x without the composition API.