CRA主应用集成Vite微前端遇配置问题，求解决方案

我司此前使用Create React App（CRA）结合react-app-rewired成功构建并集成了多个微前端，但近期尝试将Vite构建的新微前端接入现有门户时，在配置阶段遭遇诸多挑战。

问题概述 #

门户基于CRA构建，此前所有微前端均为CRA+react-app-rewired架构，运行正常。但在接入Vite构建的新应用的概念验证（POC）阶段，遇到了CRA与Vite之间环境变量、导入及模块兼容性相关的多个问题，经多次尝试仍无法解决，需指导完成Vite应用作为微前端的集成。

遇到的挑战 #

• 环境变量处理：CRA与Vite的环境变量处理逻辑不同，虽调整配置解决了部分导入错误，但新问题仍持续出现。
• 模块类型问题：尝试将模块转为JS格式以解决兼容性问题，但未奏效；尝试将CRA应用迁移至Vite，但因项目文件均为JS格式遇阻，虽在Vite配置中添加optimizationDeps.loader仍存在问题。
• 命名导出错误：多次尝试仍无法解决命名导出问题，导致CRA（主应用）与Vite（远程应用）无法正常加载组件；相关集成的资源与文档匮乏，陷入瓶颈。

已尝试的方案 #

• 解决了CRA与Vite的环境变量不匹配问题
• 将模块转为JS格式（无效）
• 尝试迁移CRA至Vite，遇JS文件与命名导出问题
• 配置Vite的optimizationDeps.loader以解决文件加载问题

示例项目仓库 #

• CRA主应用：host
• CRA微前端：app-1
• Vite微前端：app-2

Vite微前端配置 #

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "appTwo",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/App"
      },
      shared: ["react", "react-dom"]
    })
  ],
  build: {
    target: "esnext",
    modulePreload: {
      polyfill: false // 禁用预加载以兼容Webpack
    }
  },
  optimization: {
    minimize: true,
    usedExports: true,
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          chunks: "all"
        }
      },
      chunks: "all"
    }
  },
  preview: {
    host: "localhost",
    port: 3002,
    strictPort: true,
    headers: {
      "Access-Control-Allow-Origin": "*"
    }
  }
});

CRA主应用配置 #

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const deps = require("./package.json").dependencies;

const frontendUrls = "http://localhost:3000/";

module.exports = {
  webpack: function (config, env) {
    try {
      config.output = { ...config.output, publicPath: frontendUrls };

      config.plugins.push(
        new ModuleFederationPlugin({
          name: "iie",
          filename: "remoteEntry.js",
          remotes: {
            appOne: `appOne@http://localhost:3001/remoteEntry.js`,
            appTwo: `appTwo@http://localhost:3002/assets/remoteEntry.js`
          },
          exposes: {},
          shared: {
            ...deps,
            react: {
              singleton: true,
              requiredVersion: deps.react
            },
            "react-dom": {
              singleton: true,
              requiredVersion: deps["react-dom"]
            },
            "react-router-dom": {
              singleton: true,
              requiredVersion: deps["react-router-dom"]
            }
          }
        })
      );
      return config;
    } catch (error) {
      throw error;
    }
  }
};

针对性解决方案 #

1. 修复命名导出与模块兼容性问题 #

Vite模块联邦与Webpack的导出处理存在差异，需确保Vite微前端的导出符合Webpack预期：

• 在Vite微前端的src/App.js中同时添加默认导出和命名导出：

  function App() { /* 组件内容 */ }
  export default App;
  export { App };
  

• 保持Vite联邦配置的exposes指向该文件即可，无需额外修改路径。

2. 统一共享依赖的版本与配置 #

CRA与Vite的共享依赖必须版本一致且配置对齐：

• 在Vite配置的shared中添加精确版本约束，与CRA主应用package.json的依赖版本完全匹配：

  shared: {
    react: { singleton: true, requiredVersion: "^18.2.0" },
    "react-dom": { singleton: true, requiredVersion: "^18.2.0" }
  }
  

• 确保CRA主应用shared配置中的requiredVersion与Vite端完全一致，避免版本冲突导致单例失效。

3. 调整模块类型与构建目标 #

降低Vite的构建目标以提升与Webpack的兼容性：

• 将Vite的build.target改为es2020：

  build: {
    target: "es2020",
    // 其他配置保持不变
  }
  

• 添加resolve.extensions确保JS文件被正确识别：

  resolve: {
    extensions: ['.js', '.jsx', '.json']
  }
  

4. 环境变量的统一处理 #

适配CRA与Vite的环境变量前缀差异：

• 在Vite配置中通过define注入CRA风格的环境变量：

  define: {
    'process.env.REACT_APP_API_URL': JSON.stringify(process.env.VITE_API_URL)
  }
  

• 若需跨应用共享环境变量，可通过模块联邦的共享上下文传递，或在主应用中统一注入。

5. 解决CRA迁移Vite的JS文件问题 #

若计划将CRA主应用迁移至Vite，针对JS文件的适配：

• 修改@vitejs/plugin-react配置，让插件处理JS文件中的JSX：

  react({
    jsxRuntime: 'automatic',
    include: /\.js$/
  })
  

• 长期方案建议逐步将JS文件重命名为JSX，避免语法兼容问题。

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