Vite-Plugin-Federation 无法导入带有钩子的反应组件

Question

我想用vite federation来搭建一个微前端结构。但是，当远程组件有钩子时，主机网站会出错。想问一下我的设置有什么问题吗？

使用的插件：@originjs/vite-plugin-federation：v1.1.9

错误信息：

https://i.stack.imgur.com/GVsmM.png

主持人

vite.config.js

export default defineConfig(({ mode }) => {
  plugins: [
      react(),
      federation({
        name: 'host',
        filename: 'remoteEntry.js',
        remotes: {
          imbee_workflow: 'http://localhost:5001/assets/remoteEntry.js',
        },
        shared: ['react', 'react-dom'],
      }),
    ],
    build: {
      outDir: path.join(__dirname, 'build'),
      target: 'esnext',
      minify: false,
      cssCodeSplit: false,
    },
}

代码

import { Box } from '@mui/material';
import React from 'react';

const Button = React.lazy(() => import('remote/Button'));

function hostPage() {
  return (
    <Box height="100%" width="100%" overflow="hidden">
      <Button caption="Hello World" />
    </Box>
  );
}

export default hostPage;

偏僻的

vite.config.js

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'remote',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button.tsx',
        './Hello': './src/Hello.tsx',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false,
  },
});

代码

import React from 'react';

function Button({ caption = 'Home Button' }) {
  // Without hooks, there won't have any problem.
  const [test, setTest] = React.useState('test');
  return <button>{`${caption}-${test}`}</button>;
}

export default Button;

Answer 1

在 1.1.11 中，它为简单的钩子修复了错误，请尝试：

npm install @originjs/vite-plugin-federation@1.1.11 --save-dev