[Bug]: MF breaks the asset path when more than one sub path #2482

XavierLeTohic · 2024-05-31T09:46:33Z

Version

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1
    Memory: 41.70 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 125.0.6422.141
    Safari: 17.4.1
  npmPackages:
    @rsbuild/core: ^0.7.1 => 0.7.1 
    @rsbuild/plugin-react: ^0.7.1 => 0.7.1

Details

When setting moduleFederation.options and reloading with more than one sub path (.i.e /sub/path) Rsbuild inject assets without the prefix / even setting output.assetPrefix: "/" resulting in a white page.

Commenting or removing the whole moduleFederation from rsbuild config and everything works well.

See the attached Codesandbox and repository to reproduce.

Reproduce link

https://codesandbox.io/p/github/XavierLeTohic/rsbuild-mf-asset-path/main

Reproduce Steps

The repo of the codesandbox is here:

https://github.com/XavierLeTohic/rsbuild-mf-asset-path

To reproduce:

Clone
npm install or yarn install
npm run dev or yarn dev
On http://localhost:5050/example everything will work as expected if you reload
Go to http://localhost:5050/example/sub/path and reload it will be broken
Comment the whole module federation in rsbuild.config.ts and try to reload it'll work

The text was updated successfully, but these errors were encountered:

chenjiahan · 2024-06-03T05:47:46Z

output.assetPrefix is for production build, can you try the dev.assetPrefix config?

Note that when you use moduleFederation.options, Rsbuild will set the default value of Rspack's output.publicPath configuration to 'auto', this is recommended by MF team.

XavierLeTohic · 2024-06-03T08:27:30Z

dev.assetPrefix helped me discover that the reason why it's not working it's that it does not find assets using rsbuild dev and with module federation no matter the prefix I use, I updated the Codesandbox to reproduce, any idea?

Note that output.publicPath does not exists according to the types in 0.7.1 even tho it's mentioned in the documentation.

chenjiahan · 2024-06-03T09:10:33Z

output.publicPath is a config of Rspack, you can use Rsbuild's tools.rspack to configure it.

ScriptedAlchemy · 2024-06-04T13:30:08Z

Is public path set to auto?

XavierLeTohic · 2024-06-04T16:13:41Z

Was fixed in dev by setting config.output.publicPath = '/' since config.output.publicPath = 'auto' still break the injection of assets when more than one sub path is used and the page is reloaded.

Updated the codesandbox to demo when it fails with auto -> https://codesandbox.io/p/github/XavierLeTohic/rsbuild-mf-asset-path/main

imzisy · 2024-06-05T06:51:45Z

I tried to change publicPath to / but it is not working for the host app.

XavierLeTohic · 2024-06-05T12:44:18Z

I tried to change publicPath to / but it is not working for the host app.

Did you setup MF via appendPlugins like below?

tools: {
		rspack: (config, { appendPlugins }) => {
			config.output.publicPath = "/";

			appendPlugins([
				new ModuleFederationPlugin({ // ...my options })
			]);
		},
	},

imzisy · 2024-06-05T12:46:48Z

I tried to change publicPath to / but it is not working for the host app.

Did you setup MF via appendPlugins like below?
tools: {
		rspack: (config, { appendPlugins }) => {
			config.output.publicPath = "/";

			appendPlugins([
				new ModuleFederationPlugin({ // ...my options })
			]);
		},
	},

I'm using the v1 moduleFederation.options .

XavierLeTohic · 2024-06-05T13:57:12Z

No certain but I think you can find the plugin of the 1.5 from @rspack/core's container

nate-summercook · 2024-07-04T14:53:50Z

maybe related to #2747 ?

imzisy · 2024-07-04T14:57:55Z

To resolve this issue, upgrade to the latest version of Module Federation.

XavierLeTohic · 2024-07-04T15:55:33Z

@imzisy this issue also happen with the built-in module federation of rsbuild, not only using the external plugin @module-federation/enhanced/rspack

XavierLeTohic · 2024-07-09T16:12:09Z

After upgrading to ^1.0.0-alpha.6 it fixed the issue using tools.rspack but the issue remain with the built-in moduleFederation.options

qmakani · 2024-09-21T19:44:12Z

this doesn't seem like an issue anymore. should be safe to close it?

XavierLeTohic · 2024-09-23T09:54:13Z

Fixed on the latest versions

petrosD93 · 2024-11-13T16:04:42Z

@XavierLeTohic whats the resolution for this? It's not clear on how we can resolve this issue as I'm currently facing the same. By upgrading to @rsbuild/core latest, can we still use the built-in moduleFederation.options?

XavierLeTohic · 2024-11-13T16:11:07Z

@petrosD93 we ended up setting MF options using:

import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  tools: {
    rspack: (config, { appendPlugins, rspack }) => {
      appendPlugins(
        [
          new rspack.container.ModuleFederationPlugin({ 
            // mf config 
          }),
        ],
      );
    }
  }
});

I thought that issue would have been fixed using moduleFederation.options since then, never tried it again

ScriptedAlchemy · 2024-11-13T19:47:12Z

https://module-federation.io/guide/basic/rsbuild.html

petrosD93 · 2024-11-15T09:22:34Z

@ScriptedAlchemy thanks for pointing this out, I was following the documentation of RsBuild. My issue seems to be more complex though. I am trying to transform our projects from Webpack to RsBuild. Thing is I am using the API of MF to load remotes (that was done in order to be able to change MF Config of remotes at runtime, and to also ensure proper error handling of host application when one of the remotes are failing). I understand that the logic we used back then was depending on fetching remote js modules, where now we do fetch the mf-manifest.json. I wonder if there is any documentation on how to use the API of module federation with RsBuild and the module federation plugin

ScriptedAlchemy · 2024-11-15T19:29:06Z

Federation runtime might be useful?

https://module-federation.io/guide/basic/runtime.html

Primarily the main thing is you should be using the package from us and not the builtin container object in the bundler. Since those just expose the base classes from rust side of rspack.

VictorPulzz · 2025-02-04T21:22:54Z

@ScriptedAlchemy
I faced the same problem, when I used in rsbuild config this setting, publicPath : 'auto'

  tools: {
      ...config.tools,
      rspack: {
        ...config.tools?.rspack,
        output: {
          publicPath: 'auto',
          // clean: true,
        },
      },
    },

, everything worked, but then I started to configure react tanstack router and realized that internal routes do not work because the js script is inserted

<script defer src="static/js/vendor. js“></script><script defer src=”static/js/index.js"></script>,

so all internal routes, say /dashboard/edit, don't work. When I removed publicPath: auto, the router started working and in dev mode mf works, but in production build, the microfrontend stopped working:

Please help....

You can see that the paths referenced by module federation are wrong, it inserts relative paths localhost:3000, but the bindle files themselves are localhost:3051 (in remove app).

I using: @module-federation/rsbuild-plugin

VictorPulzz · 2025-02-04T22:00:25Z

@XavierLeTohic Can you help please?

XavierLeTohic · 2025-02-04T22:05:59Z

Have you tried using module federation directly getting it from the container like in my last comment above?

I haven't tried @module-federation/rsbuild-plugin yet.

VictorPulzz · 2025-02-04T22:19:57Z

@XavierLeTohic Yes, this is my config:

import type { moduleFederationPlugin } from '@module-federation/sdk';
import { loadEnv, RsbuildConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSass } from '@rsbuild/plugin-sass';
import path from 'path';

// eslint-disable-next-line import/no-relative-packages
import packagesVersion from '../../../package.json' assert { type: 'json' };

const { parsed } = loadEnv();

const defaultPublicEnvList: (keyof ImportMetaEnv)[] = ['API_GATEWAY'];
const typedParsed = parsed as Record<keyof ImportMetaEnv, string>;

export const rsbuildConfig = (
  config: RsbuildConfig = {},
  moduleFederation: moduleFederationPlugin.ModuleFederationPluginOptions = {},
  publicEnvList: (keyof ImportMetaEnv)[] = [],
): RsbuildConfig => {
  const plugins = [...(config.plugins ?? [])];

  plugins.push(
    pluginReact(),
    pluginSass(),
    // pluginModuleFederation({
    //
    // }),
  );

  const resultConfig: RsbuildConfig = {
    ...config,
    server: {
      ...config.server,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
      },
      publicDir: [
        {
          name: 'public',
          watch: true,
        },
        {
          name: path.resolve(__dirname, '../../../libs/ui/public'),
          watch: true,
        },
      ],
    },

    source: {
      ...config.source,
      define: Object.keys(typedParsed)
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        .filter(item => publicEnvList.includes(item as any))
        .concat(defaultPublicEnvList as never)
        .reduce(
          (prev, key) => {
            const sanitizedKey = key.replace(/[^a-zA-Z0-9_]/g, '_');

            prev[`import.meta.env.${sanitizedKey}`] = JSON.stringify(parsed[key]);

            return prev;
          },
          {} as Record<string, string>,
        ),
    },

    output: {
      ...config.output,
      cleanDistPath: true,
    },

    tools: {
      ...config.tools,
      rspack: (config, { appendPlugins, rspack }) => {
        appendPlugins([
          new rspack.container.ModuleFederationPlugin({
            ...moduleFederation,
            dts: true,
            manifest: true,
            shared: {
              react: {
                singleton: true,
                requiredVersion: packagesVersion.dependencies.react,
              },
              'react-dom': {
                singleton: true,
                requiredVersion: packagesVersion.dependencies['react-dom'],
              },
              jotai: {
                singleton: true,
                requiredVersion: packagesVersion.dependencies['jotai'],
              },
              'jotai-effect': {
                singleton: true,
                requiredVersion: packagesVersion.dependencies['jotai-effect'],
              },
              clsx: {
                singleton: true,
                requiredVersion: packagesVersion.dependencies['clsx'],
              },
              zod: {
                singleton: true,
                requiredVersion: packagesVersion.dependencies['zod'],
              },
            },
            runtimePlugins: [
              path.resolve(__dirname, './module-federation-plugins/shared-strategy.ts'),
              path.resolve(__dirname, './module-federation-plugins/offline-remote.ts'),
            ],
          }),
        ]);
      },
    },

    html: {
      ...config.html,
      template: './template.html',
    },

    performance: {
      ...config.performance,
      chunkSplit: {
        ...config.performance?.chunkSplit,
        strategy: 'single-vendor',
      },
    },
  };

  return {
    ...resultConfig,
    plugins,
  };
};

Host app rsbuild.config.ts

import { rsbuildConfig } from '@platform/rsbuild-config';
import { defineConfig } from '@rsbuild/core';

// eslint-disable-next-line import/no-relative-packages
import mfConfigs from '../../.deploy/mf.json' assert { type: 'json' };

const env = process.env.ENV;
const appConfig = mfConfigs.mfs.app;

if (!appConfig) {
  throw new Error('You dont setup this mf in mf.json!');
}

export default defineConfig(
  rsbuildConfig(
    {
      server: {
        port: appConfig.ports[env],
      },
    },
    {
      name: appConfig.name,
      remotes: appConfig.mfs.reduce((acc, curr) => {
        return {
          ...acc,
          [curr.alias]: `${curr.name}@${curr.entry[process.env.NODE_ENV][env]}`,
        };
      }, {}),
    },
  ),
);

Remote app rsbuild.config.ts

import { rsbuildConfig } from '@platform/rsbuild-config';
import { defineConfig } from '@rsbuild/core';

// eslint-disable-next-line import/no-relative-packages
import mfConfigs from '../../.deploy/mf.json' assert { type: 'json' };

const env = process.env.ENV;
const appConfig = mfConfigs.mfs.tasks;

if (!appConfig) {
  throw new Error('You dont setup this mf in mf.json!');
}

export default defineConfig(
  rsbuildConfig(
    {
      server: {
        port: appConfig.ports[env],
      },
    },
    {
      name: appConfig.name,
      filename: 'remoteEntry.js',
      exposes: {
        './Tasks': './src/components/Tasks.tsx',
      },
    },
  ),
);

But, I got same issue with @module-federation/rsbuild-plugin

XavierLeTohic · 2025-02-04T22:24:33Z

What happens if you set the publicPath to "/" instead of auto?

I would recommend that you make either a reproducible example in a repository or a code sandbox

VictorPulzz · 2025-02-04T22:29:49Z

I wrote it like this:

    tools: {
      ...config.tools,
      rspack: {
        ...config.tools?.rspack,
        output: {
          publicPath: '/',
          // clean: true,
        },
      },
    },

Nothing has changed, I'm very tired:(

XavierLeTohic · 2025-02-04T22:32:54Z

I will have a look tomorrow, also why are you spreading the default rsbuild config everywhere? It's not gonna erase the whole config at the end but apply some kind of patch

VictorPulzz · 2025-02-04T22:34:08Z

Do you think it is necessary to write publicPath="auto" only for remote apps?
I have a very large project and I want to unify:)

petrosD93 · 2025-02-05T06:29:53Z

@VictorPulzz have a look at this module-federation/core#3343

I ended up using the base meta tag

VictorPulzz · 2025-02-05T19:07:09Z

@XavierLeTohic @petrosD93
Thanks a lot guys for your help, I made it easier, I just passed publicPath: 'auto' only for remote project,

import { rsbuildConfig } from '@platform/rsbuild-config';
import { defineConfig } from '@rsbuild/core';

// eslint-disable-next-line import/no-relative-packages
import mfConfigs from '../../.deploy/mf.json' assert { type: 'json' };

const env = process.env.ENV;
const appConfig = mfConfigs.mfs.tasks;

if (!appConfig) {
  throw new Error('You dont setup this mf in mf.json!');
}

export default defineConfig(
  rsbuildConfig(
    {
      server: {
        port: appConfig.ports[env],
      },
      tools: {
        rspack: {
          output: {
            publicPath: 'auto',
          },
        },
      },
    },
    {
      name: appConfig.name,
      filename: 'remoteEntry.js',
      exposes: {
        './Tasks': './src/components/Tasks.tsx',
      },
    },
  ),
);

Everything seems to work, locally dev/prod, as well as on amazon, I want to put my setup rsbuild+eslint+prettier+tailwind+mf in a separate monorepo, maybe it will help someone, as I will write here:))

XavierLeTohic added the bug Something isn't working label May 31, 2024

XavierLeTohic closed this as completed Sep 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: MF breaks the asset path when more than one sub path #2482

[Bug]: MF breaks the asset path when more than one sub path #2482

XavierLeTohic commented May 31, 2024 •

edited

Loading

chenjiahan commented Jun 3, 2024

XavierLeTohic commented Jun 3, 2024

chenjiahan commented Jun 3, 2024

ScriptedAlchemy commented Jun 4, 2024

XavierLeTohic commented Jun 4, 2024

imzisy commented Jun 5, 2024 •

edited

Loading

XavierLeTohic commented Jun 5, 2024 •

edited

Loading

imzisy commented Jun 5, 2024 •

edited

Loading

XavierLeTohic commented Jun 5, 2024

nate-summercook commented Jul 4, 2024

imzisy commented Jul 4, 2024

XavierLeTohic commented Jul 4, 2024 •

edited

Loading

XavierLeTohic commented Jul 9, 2024

qmakani commented Sep 21, 2024

XavierLeTohic commented Sep 23, 2024

petrosD93 commented Nov 13, 2024

XavierLeTohic commented Nov 13, 2024

ScriptedAlchemy commented Nov 13, 2024 •

edited

Loading

petrosD93 commented Nov 15, 2024

ScriptedAlchemy commented Nov 15, 2024

VictorPulzz commented Feb 4, 2025 •

edited

Loading

VictorPulzz commented Feb 4, 2025

XavierLeTohic commented Feb 4, 2025

VictorPulzz commented Feb 4, 2025 •

edited

Loading

XavierLeTohic commented Feb 4, 2025

VictorPulzz commented Feb 4, 2025

XavierLeTohic commented Feb 4, 2025

VictorPulzz commented Feb 4, 2025 •

edited

Loading

petrosD93 commented Feb 5, 2025 •

edited

Loading

VictorPulzz commented Feb 5, 2025

[Bug]: MF breaks the asset path when more than one sub path #2482

[Bug]: MF breaks the asset path when more than one sub path #2482

Comments

XavierLeTohic commented May 31, 2024 • edited Loading

Version

Details

Reproduce link

Reproduce Steps

chenjiahan commented Jun 3, 2024

XavierLeTohic commented Jun 3, 2024

chenjiahan commented Jun 3, 2024

ScriptedAlchemy commented Jun 4, 2024

XavierLeTohic commented Jun 4, 2024

imzisy commented Jun 5, 2024 • edited Loading

XavierLeTohic commented Jun 5, 2024 • edited Loading

imzisy commented Jun 5, 2024 • edited Loading

XavierLeTohic commented Jun 5, 2024

nate-summercook commented Jul 4, 2024

imzisy commented Jul 4, 2024

XavierLeTohic commented Jul 4, 2024 • edited Loading

XavierLeTohic commented Jul 9, 2024

qmakani commented Sep 21, 2024

XavierLeTohic commented Sep 23, 2024

petrosD93 commented Nov 13, 2024

XavierLeTohic commented Nov 13, 2024

ScriptedAlchemy commented Nov 13, 2024 • edited Loading

petrosD93 commented Nov 15, 2024

ScriptedAlchemy commented Nov 15, 2024

VictorPulzz commented Feb 4, 2025 • edited Loading

VictorPulzz commented Feb 4, 2025

XavierLeTohic commented Feb 4, 2025

VictorPulzz commented Feb 4, 2025 • edited Loading

XavierLeTohic commented Feb 4, 2025

VictorPulzz commented Feb 4, 2025

XavierLeTohic commented Feb 4, 2025

VictorPulzz commented Feb 4, 2025 • edited Loading

petrosD93 commented Feb 5, 2025 • edited Loading

VictorPulzz commented Feb 5, 2025

XavierLeTohic commented May 31, 2024 •

edited

Loading

imzisy commented Jun 5, 2024 •

edited

Loading

XavierLeTohic commented Jun 5, 2024 •

edited

Loading

imzisy commented Jun 5, 2024 •

edited

Loading

XavierLeTohic commented Jul 4, 2024 •

edited

Loading

ScriptedAlchemy commented Nov 13, 2024 •

edited

Loading

VictorPulzz commented Feb 4, 2025 •

edited

Loading

VictorPulzz commented Feb 4, 2025 •

edited

Loading

VictorPulzz commented Feb 4, 2025 •

edited

Loading

petrosD93 commented Feb 5, 2025 •

edited

Loading