使用Module Federation从宿主应用向微前端远程应用传递Props问题求助

我尝试通过Webpack Module Federation从宿主应用向远程应用的Counter组件传递value="hello"属性，但远程组件中打印的props始终是undefined，求解决方法。

宿主应用代码及Webpack配置 #

// Webpack配置
new ModuleFederationPlugin({
  name: "host",
  filename: "remoteEntry.js",
  remotes: {
    remote:"remote@http://localhost:5500/remoteEntry.js"
  },
  exposes: {},
  shared: {
    ...deps,
    react: {
      singleton: true,
      requiredVersion: deps.react,
    },
    "react-dom": {
      singleton: true,
      requiredVersion: deps["react-dom"],
    },
  },
})

// 宿主App组件
import Counter from "remote/Counter"
const App = () => (
  <div className="container">
    <div>Name: host</div>
    <Counter value={"hello"} />
  </div>
);

远程应用代码及Webpack配置 #

// Webpack配置
new ModuleFederationPlugin({
  name: "remote",
  filename: "remoteEntry.js",
  remotes: {},
  exposes: {
    "./Counter":"./src/Counter.jsx"
  },
  shared: {
    ...deps,
    react: {
      eager:true,
      singleton: true,
      requiredVersion: deps.react,
    },
    "react-dom": {
      eager:true,
      singleton: true,
      requiredVersion: deps["react-dom"],
    },
  },
})

// Counter组件
const Counter = (props) => {
  const [count, setCount] = useState(0)
  const [serverData, setServerData] = useState("")
  console.log({ props })  // 期望这里能拿到value属性
  return (
    <div style={{ color: 'blue', backgroundColor: "pink" }}>
      <button onClick={() => setCount(prev => prev + 1)}>Click</button>
      Counter: {count}
      <p>{serverData} {props && props.hii}</p>
    </div>
  )
}

// 远程内部App组件
const App = (props) => (
  <div className="container">
    <div>Name: remote</div>
    <Counter />
  </div>
);
ReactDOM.render(<App />, document.getElementById("app"));

问题原因 #

远程应用的Counter组件仅定义了变量，但没有添加默认导出语句。宿主应用通过import Counter from "remote/Counter"引入的是默认导出的组件，此时实际引入的是undefined，自然无法传递任何props。

另外，远程内部App组件中渲染Counter时未传props，这和宿主传递props的问题无关——宿主直接引入的是暴露的Counter组件，和远程内部的App组件逻辑不冲突。

解决方案 #

1. 在远程应用的Counter.jsx文件末尾添加默认导出：

export default Counter;

2. 若要在Counter组件中使用宿主传递的value属性，修改组件内的渲染代码（原代码中写的是props.hii，和传递的value不匹配）：

<p>{serverData} {props && props.value}</p>

修正后的Counter组件代码：

import { useState } from 'react';

const Counter = (props) => {
  const [count, setCount] = useState(0)
  const [serverData, setServerData] = useState("")
  console.log({ props })
  return (
    <div style={{ color: 'blue', backgroundColor: "pink" }}>
      <button onClick={() => setCount(prev => prev + 1)}>Click</button>
      Counter: {count}
      <p>{serverData} {props && props.value}</p>
    </div>
  )
}

export default Counter;

内容的提问来源于stack exchange，提问作者Danny1911