In our organization, we have successfully built and integrated multiple micro-frontends using Create React App (CRA) combined with react-app-rewired. However, we recently tried to integrate a new micro-frontend built with VITE into our existing portal and encountered several challenges during the setup.

Problem Overview:
We have a portal built using CRA, and all previous micro-frontends were also CRA-based with react-app-rewired. Everything worked fine until we started integrating a new application built with VITE.
During the Proof of Concept (POC), we ran into several issues related to environment variables, imports, and module compatibility between CRA and VITE.
We are now stuck after several trials and errors, and would appreciate any guidance on how to resolve the issues and successfully integrate the VITE application as a micro-frontend.

Challenges Encountered:

• Environment Variables Handling:
  We realized that CRA and VITE handle environment variables differently, which led to import errors that were resolved by tweaking some configurations, but new issues persisted.

• Module Type Issues:
  We tried converting the module to a JS format to address the module compatibility issue, but it didn’t resolve the errors.
  VITE-Specific Configurations:
  We attempted to migrate the CRA app to VITE, but ran into an issue with all project files being in JS format, which led us to add optimizationDeps.loader in VITE’s config to address this, but we continued facing challenges.

• Named Export Errors:
  Despite multiple attempts, we couldn’t resolve the named export issues, which prevented proper component loading between the CRA (host) and VITE (remote) application.
  Lack of Resources and Documentation:
  We couldn’t find enough resources or documentation to guide us through integrating VITE with CRA in a micro-frontend setup, and we have hit a roadblock.

• What We’ve Tried:
  Resolved environment variable mismatches between CRA and VITE.
  Converted modules to JS format (didn’t help).
  Attempted to migrate CRA to VITE, but faced issues with JS files and named exports.
  Configured optimizationDeps.loader in VITE to resolve file loading issues.

In order to better understand the issue i have create a git repo for all the dummy projects

Links of repo –

• https://github.com/sagarjha1846/host // CRA
• https://github.com/sagarjha1846/app-1 // CRA
• https://github.com/sagarjha1846/app-2 // Vite

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

// https://vite.dev/config/
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 // Disable preload for Webpack compatibility
    }
  },
  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": "*"
    }
  }
});

Host CRA setup

// Plugin imports
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
// Dependency imports
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;
    }
  }
};