React router dom

[jucian0]

There are any config for nested routes for react-router-dom?

I have a route like that localhost:3000/myapp/other-page, it works normal when a click to navigate, but when I reload the page I get an error;

Uncaught SyntaxError: Unexpected token '<' (at lib-react.js:1:1)
vendors-data_application_node_import___module_federation_bundler_runtime___from_home_barbosa_-d5f0fa.js:1 Uncaught SyntaxError: Unexpected token '<' (at vendors-data_application_node_import___module_federation_bundler_runtime___from_home_barbosa_-d5f0fa.js:1:1)
index.js:1 Uncaught SyntaxError: Unexpected token '<' (at index.js:1:1)
contentScript.bundle.js:1 WebSocket connection to 'ws://localhost:40001/' failed: 

My config:

export default defineConfig({
  plugins: [pluginReact()],
  server: {
    port: 3000,
  },
  source: {
    alias: {
      "@": "./src",
    },
    define: {
      "process.env": {},
    },
  },
  moduleFederation: {
    options: mfConfig,
  },
});

[xc2]

how did you start the server on :3000

[jucian0]

Do you mean the script? rsbuild dev

[xc2]

looks mf-related problem. please share your mf configs

[jucian0]

Host config

import { dependencies } from './package.json';
import type { Rspack } from '@rsbuild/core';

export const mfConfig: Rspack.ModuleFederationPluginOptions = {
  name: 'host',
  remotes: {
    consumers: 'consumers@http://localhost:3001/remoteEntry.js',
  },
  shared: {
    ...dependencies,
    react: {
      singleton: true,
      requiredVersion: dependencies.react,
    },
    'react-dom': {
      singleton: true,
      requiredVersion: dependencies['react-dom'],
    },
  },
};

Remote config

import { dependencies } from './package.json';
import type { Rspack } from '@rsbuild/core';

export const mfConfig: Rspack.ModuleFederationPluginOptions = {
  name: 'consumers',
  exposes: {
    './button': './src/button.tsx',
  },
  filename: 'remoteEntry.js',
  shared: {
    ...dependencies,
    react: {
      singleton: true,
      requiredVersion: dependencies.react,
    },
    'react-dom': {
      singleton: true,
      requiredVersion: dependencies['react-dom'],
    },
  },
};

[jucian0]

Yeah, that is a federation problem, when I remove it, the reload works, but now I just want to know if there is something wrong in my federation config

[lionelyau23]

I have encountered the same issue, but with tanstack router.
Seems like the issue is with the generated html when module federation is turned on.
I am using "@rsbuild/core": "^0.4.13", and "@rsbuild/plugin-react": "^0.4.13",

When module federation is not enabled, the script tag in the generated html is something like this.

<script defer src="/static/js/index.js"></script>

When module federation is enabled (regardless of config), the script tag in the generated html becomes this.

<script defer src="static/js/index.js"></script>

Notice the missing leading slash / in the later src attribute.

This causes the browser to use the full url path when fetching the js files from the server. When the url is not the basepath, e.g. localhost:3000/abc, the html will be served even though the browser requested the js file. This can be observed in the network tab in the browser.

Please check your browser's network tab to see if you can also observe similar behaviour.

I can get around this issue by building the project first. Then modify the generated html manually to add back the leading slash and use preview. But obviously this means I cannot use dev mode.

[lionelyau23]

Seems setting the publicPath to '/' in the htmlPlugin can solve this issue without modifying the generated html file.

But I am not sure if this should be the intended way.

export default defineConfig({
  plugins: [pluginReact()],
  server: {
    port: 3000,
  },
  moduleFederation: {
    options: {
      name: "host",
    },
  },
  tools: {
    htmlPlugin: {
      publicPath: "/",
    },
  },
});

[jucian0]

Worked for me too, thanks!

[9aoy]

Found a related issue in module-federation-examples, it seems that adding publicPath: '/' in HtmlPlugin is a general solution to the current problem.

module-federation/module-federation-examples#102