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.

This question has a similar problem, have you tried anything in that sense. — wiltonsr
– wiltonsr, Commented Jan 21, 2021 at 12:41

Yas Ikeda · Accepted Answer · 2021-03-04 23:41:32Z

10

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"
  ]
}

answered Mar 4, 2021 at 23:41

Yas Ikeda

1,0961 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs and Webpack 5 Federation typescript bug

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related