originjs / vite-plugin-federation

Module Federation for vite & rollup
Other
2.17k stars 228 forks source link

moduleMap[module] is not a function #453

Open Freedom-FJ opened 1 year ago

Freedom-FJ commented 1 year ago

我今天使用次插件打包了出了一个组件库才用模块联邦 但是出现了如下问题:

Uncaught TypeError: moduleMap[module] is not a function
    at Module.get (remoteEntry.js:38:33)
    at __x00__virtual:__federation__:81:73
    at async main.ts:14:20

我的host vite配置如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@originjs/vite-plugin-federation'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
    cacheDir: 'node_modules/.cacheDir',
    resolve: {
        dedupe: [
            'vue'
        ]
    },
    plugins: [
        federation({
            name: 'vite-host',
            remotes: {
                'vite-side': {
                    external: 'http://127.0.0.1:5000/assets/remoteEntry.js',
                    format: 'esm',
                    from: 'vite',
                    externalType: 'url'
                },
            },
            shared: ['vue']
        }),
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
            imports: ['vue'],
            dts: 'auto-imports.d.ts',
        }),
        Components({
            dirs: [],
            resolvers: [ElementPlusResolver()],
        }),
    ],
})

我的remote端 配置如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@originjs/vite-plugin-federation'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // 模块联邦配置
        federation({
            name: 'vite-side',
            filename: 'remoteEntry.js',
            // 导出模块声明
            // 这几个文件自己手动补充下
            exposes: {
                './wgms': './src/components/wgms.ts',
                './ipes': './src/components/ipes.ts',
                './aims': './src/components/aims.ts',
                './bmp': './src/components/bmp.ts',
            },
            // 共享依赖声明
            shared: ['vue'],
        }),
    ],
    resolve: {
        dedupe: ['vue'], // this line
    },
    // 打包配置
    build: {
        target: 'esnext',
        minify: false
    },
})
Freedom-FJ commented 1 year ago

我解决了 就是因为我使用的时候 import { name } from 'wgms'; 引入了一个不存在的包导致的,但是这应该有一个错误的捕获,而不是直接显示报错 比如提示 name 包不存在