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

Question

Versions

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

Steps to reproduce

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

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.

code (host and remote)

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:

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

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

remote project:


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

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,
      },
    },
  },
});

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

David Martin · Accepted Answer · 2024-02-22 00:12:44Z

-1

From this link on LinkedIn in the comments I was able to find my answer. We use Vue, and I am doing a POC of moving from vue-cli to Vite. Everything was Webpack, and my POC is change only the remote to Vite for now. Also, our config files look rather different from yours. So, while our situations may have a lot of differences, I hope you find this answers your question.

Note: My remote vite.config.js looks very similar to yours with respect to the module federation section.

In case link above does not work:

Originally my webpack config had the following remote entry:

plugins: [
      new ModuleFederationPlugin({
        name: 'hostApp',
        filename: 'remoteEntry.js',
        remotes: {
          remoteApp: 'remoteApp@http://localhost:27002/assets/remoteEntry.js")',
        },
      })
    ]

And changing it to the following got rid of that error. Only difference being around the url portion of the remote registration.

plugins: [
      new ModuleFederationPlugin({
        name: 'hostApp',
        filename: 'remoteEntry.js',
        remotes: {
          remoteApp: 'promise import("http://localhost:27002/assets/remoteEntry.js")',
        },
      })
    ]

And our vite.config.js for the remote:

    federation({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      remotes: {},
      exposes: {
        './Register': { import: './src/register' },
      },
      shared: require('./package.json').dependencies,
  })

answered Feb 22, 2024 at 0:12

David Martin

5117 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Manspof Over a year ago

Hi, thanks for your answer. I changed it but now I'm getting: Cannot convert object to primitive value TypeError: Cannot convert object to primitive value at mountLazyComponent (localhost:3000/vendors-node_modules_react.. I edited my post and show how I import the remote project with LazyLoad

Abhishek Sharma Aug 24 at 10:25

Did you get the solution?

Wiklz wiklz Sep 11 at 11:33

jesus, worked for me

Collectives™ on Stack Overflow

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

Versions

Steps to reproduce

What is actually happening?

code (host and remote)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Versions

Steps to reproduce

What is actually happening?

code (host and remote)

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related