Failed to parse vite-plugin-federation

[JessYan0913]

I want to use it with vite-plugin-federation, but I found that vite-plugin-dynamic-import cannot be resolved.

vite.config.js

plugins: [
      vue(),
      dynamicImport(),
      federation({
        name: 'edoms-runtime',
        remotes: {
          'remote-ui': 'http://localhost:8001/assets/remoteEntry.js',
        },
        shared: ['vue', 'element-plus'],
      }),
    ],

main.ts

edomsApp.component(
  'UiButton',
  defineAsyncComponent(async () => {
    const component = 'button';
    // @ts-ignore
    const remoteUi = await import(`remote-ui/${component}`);
    return remoteUi.default.component;
  })
);

result

X [ERROR] [plugin vite-plugin-dynamic-import:pre-bundle] invalid import "import(`remote-ui/${component}`)". Variable bare imports are not supported, imports must start with ./ in the static part of the import. For example: import(`./foo/${bar}.js`).

[yejimeiming]

You can try use the following code snippets.

dynamicImport({
  filter(id) {
    if (id.startsWith('remote-ui')) {
      return false
    }
  }
})