module federation react typescript webpack and vite throws an error "Loading script failed."

[adirzoari]

Versions

• vite-plugin-federation: ^1.3.5 (latest)
• vite: ^5.1.0 (latest)

Steps to reproduce

1. Set up a host project using React, TypeScript, and Webpack.
2. Set up a remote project using Vite.
3. Configure module federation between the host and remote projects.
4. Run the projects and observe the error "Loading script failed."

What is Expected?

The projects should successfully run with module federation configured, and no "Loading script failed" error should occur.

What is actually happening?

Encounter the error "Loading script failed" when trying to run the host and remote projects with module federation configured.

When I run each of them alone:

• The "remote" React project with Vite (npm run build & npm run preview) alone successfully shows the project.
• However, when I run the host with the remote together, it throws the "Loading script failed" error.

screenshot:

Additional Details

Host Project - config-overrides.js

// Your config-overrides.js content goes here
`const path = require('path');
const hashValue = Date.now();
const { dependencies } = require('./package.json');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  experiments: {
    outputModule: true,
  },
  webpack: function (config, env) {
    config.output.filename = `[name].${hashValue}.js`;
    config.output.chunkFilename = `[name].${hashValue}.chunk.js`;
    config.output.path = path.join(__dirname, 'build');
    config.output.publicPath = 'auto';
    config.plugins = [
      ...config.plugins,
      new ModuleFederationPlugin({
        name: 'HostPoc',
        remotes: {
          PrimeDev: 'PrimeDev@http://localhost:4173/assets/remoteEntry.js',
        },
        shared: ['react', 'react-dom', 'react-router-dom'],
      }),
    ];
    return config;
  },
};
`
#### Host project import the remote

```javascript
const PrimeDev = React.lazy(() => import('primeDev/App'));
...
...
..

<Switch>
        <Route path="/prime_poc" element={<PrimeDev />} />
</Switch>

`
#### Remote Project - `vite-overrides.ts`
<!-- Attach the content of your `config-overrides.js` file here -->

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

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "PrimeDev",
      filename: "remoteEntry.js",
      exposes: {
        "./App": {
          import: "./src/App",
          name: "App",
        },
      },
      shared: ["react", "react-dom"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
    rollupOptions: {
      output: {
        format: "esm",
        entryFileNames: "assets/[name].js",
        minifyInternalExports: false,
      },
    },
  },
});

`

[romidzz]

same issue to me, any solution?

[idanlevi1]

Same issue for me! Have you found any solution?

[Lau08]

Is there an update on this issue? I have also his problem