Vuejs and Webpack 5 Federation typescript bug

Question

I have problem with a new webpack 5 module Federation and typescript. I have two separated vuejs application, written in VueJS 3. My problem is probably in webpack configuration and ts-loader, which need appendTsSuffixTo option (I'll get Cannot find module '@/App.vue' or its corresponding type declarations. without it).

NOTE: This problem is only with using vue 3 or composition api with vue 2. Vue 2 (without composition api) works with typescript well.

Webpack ts-loader is here:

   'babel-loader',
    {
       loader: 'ts-loader',

       options: {
          appendTsSuffixTo: [/\.vue$/],
       },
    }

My problem starts here, when i use 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 import it in my App.vue.:

<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 = "nav/Header";
//const Header = () => import(module); //The same problem, but error is thrown in browser inspector console.

export default defineComponent({
  name: 'App',
  components: {
    Header
  }
})

</script>

Webpack throw this error:

TS2307: Cannot find module 'nav/Header' or its corresponding type declarations.

Is it some bug or I have something wrong anywhere? For vue 2.x.x without composition api, really works everything well.

Answer 1

You need to declare it in typescript that you're going to have the external module.

Create a file with extension .d.ts in the source root directory, which is defined in tsconfig.json, and declare a module in the file.

declare module 'nav/Header'

Just in case, make sure the declaration file is included in your tsconfig.json, like below. There is a good explanation about how to include declaration files in https://stackoverflow.com/a/59728984/9195902

{
  "include": [
    "**/*.d.ts"
  ]
}