我对新的 webpack 5 模块联邦和 typescript 有疑问。我有两个独立的 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,确实一切正常。
最佳答案
您需要在 typescript 中声明您将拥有外部模块。
创建一个扩展名为 .d.ts
的文件在 tsconfig.json 中定义的源根目录中,并在文件中声明一个模块。
declare module 'nav/Header'
以防万一,请确保声明文件包含在您的 tsconfig.json
中。 ,如下所示。关于如何在 https://stackoverflow.com/a/59728984/9195902 中包含声明文件有一个很好的解释。{
"include": [
"**/*.d.ts"
]
}
关于javascript - Vuejs 和 Webpack 5 Federation typescript 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64574484/