Vuejs 和 Webpack 5 Federation 打字稿错误

Posted

技术标签:

【中文标题】Vuejs 和 Webpack 5 Federation 打字稿错误【英文标题】:Vuejs and Webpack 5 Federation typescript bug 【发布时间】:2021-02-10 21:57:56 【问题描述】:

我对新的 webpack 5 模块联邦和打字稿有疑问。我有两个独立的 vuejs 应用程序,用 VueJS 3 编写。我的问题可能出在 webpack 配置和 ts-loader 中,这需要 appendTsSuffixTo 选项(没有它我会得到 Cannot find module '@/App.vue' or its corresponding type declarations.)。

注意:只有使用 vue 3 或组合 api 和 vue 2 才会出现此问题。Vue 2(没有组合 api)适用于 typescript。

Webpack ts-loader 在这里:

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

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

我的问题从这里开始,当我使用动态联合模块时:

new ModuleFederationPlugin(
       name: 'main-app',
       filename: 'remoteEntry.js',
       remotes: 
           nav: "nav@http://localhost:5000/remoteEntry.js",
       ,
       shared: 
           ...deps,
           vue: 
               singleton: true,
               requiredVersion: deps.vue
           
       
   )

并将其导入我的 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 抛出这个错误:

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

是一些错误还是我在任何地方都有问题?对于没有组合 api 的 vue 2.x.x,确实一切正常。

【问题讨论】:

This question 有类似的问题,你有没有尝试过这种意义上的任何东西。 【参考方案1】:

您需要在 typescript 中声明您将拥有外部模块。

在源根目录下创建一个扩展名为.d.ts的文件,定义在tsconfig.json中,并在文件中声明一个模块。

declare module 'nav/Header'

以防万一,请确保声明文件包含在您的 tsconfig.json 中,如下所示。关于如何在https://***.com/a/59728984/9195902中包含声明文件有一个很好的解释


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

【讨论】:

以上是关于Vuejs 和 Webpack 5 Federation 打字稿错误的主要内容,如果未能解决你的问题,请参考以下文章

使用 Vuejs、Webpack 和 tailwindcss 创建一个 Electron 应用程序

在 Webpack + VueJs 中链接样式表和要求它们有啥区别?

无法使用 vuejs2 和 webpack 嵌入自定义字体

如何在 vuejs 和 webpack 中加载字体文件?

如何在 Vuejs+Webpack 中包含外部 sass 目录?

在没有 webpack 的情况下使用 VueJs 和 Typescript