Next.js 12.2.0中Module Federation/微前端组件无法渲染求助

一、远程应用（cm-insurance-web）配置错误 #

1. 组件路径拼写不匹配
   你创建的组件是Insurance_Detail.tsx，但next.config.js的exposes中写的是./components/Insurance_Details.tsx（多了一个s），导致Webpack找不到要暴露的组件。
   修复：修改exposes中的路径为正确的组件文件名：

   exposes: {
     "./InsuranceDetail": "./components/Insurance_Detail.tsx"
   }
   

2. publicPath 与 assetPrefix 冲突
   远程应用配置了assetPrefix: '/jobs-assets'，但手动设置config.output.publicPath = 'http://localhost:3000/_next/'，这会导致静态资源的实际路径和配置的前缀不匹配，远程组件的依赖资源无法正确加载。
   修复：将publicPath修改为包含assetPrefix的绝对路径：

   config.output.publicPath = 'http://localhost:3000/jobs-assets/_next/';
   

二、消费者应用（cm-job-board-web）配置与代码问题 #

1. 动态导入未用Suspense包裹
   远程组件是异步加载的，你导入了Suspense但未使用，组件渲染时会因为异步加载未完成而无法显示。
   修复：在使用远程组件时用Suspense包裹，添加加载占位符：

   const Insurance: NextPage = ({}: any) => {
     return (
       <Suspense fallback={<div>加载中...</div>}>
         <InsuranceDetail2 />
       </Suspense>
     )
   }
   

2. 远程脚本加载策略可能导致组件渲染时脚本未就绪
   当前Script标签使用默认策略，可能在组件渲染时远程脚本还未加载完成，导致无法获取远程模块。
   修复：将Script的strategy设置为beforeInteractive，确保脚本在页面交互前加载完成：

   <Script 
     src="http://localhost:3000/jobs-assets/_next/static/chunks/pages/cm_insurance_web.js"
     strategy="beforeInteractive"
   />
   

3. 确认远程组件的导出方式
   确保Insurance_Detail.tsx是默认导出组件，否则动态导入无法正确获取组件：

   // Insurance_Detail.tsx
   const InsuranceDetail = () => {
     // 组件内容
   }
   export default InsuranceDetail;
   

三、额外验证步骤 #

• 重新构建并启动远程应用，确认cm_insurance_web.js能通过浏览器直接访问（访问对应URL，查看是否返回正常的JS代码）。
• 打开浏览器控制台，查看是否有模块加载失败、路径错误等报错信息，这些信息能快速定位问题。

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