Integration of single-spa with rspack for Micro-Frontends

[douglaszaltron]

Description

I'm looking to integrate single-spa into an existing project and utilize rspack to build and package micro-frontends efficiently. Has anyone had experience with this combination and could share examples or insights on how to do this effectively?

Context

We have an existing project where we're exploring the use of micro-frontends for modularity and scalability. We've decided to adopt Module Federation as our micro-frontend framework, and we're also considering using rspack for bundling and optimization. However, we're unsure about the best practices and potential challenges when integrating these two technologies together.

However, we also need to package it for single-spa because there's another one that consumes this application with it. Today, we use Vite to do this.

[LingyuCoder]

cc @zhoushaw @ahabhgk

[ahabhgk]

I don't have experience about single-spa so I can't give any suggestions about best practices.
Only for supporting single-spa in Rspack, Rspack should already support it and fully compatible with the configuration required by single-spa: https://github.com/single-spa/create-single-spa/blob/main/packages/webpack-config-single-spa/lib/webpack-config-single-spa.js

[ScriptedAlchemy]

Its more than possible. Since single spa already suggests module federation for many use cases and we support all the build specifications required. You can follow single spa's module federation recipe with rspack and it should work just fine.
Alternatively you can put it into systemjs mode, but the module sharing is more robust with federation

[zhoushaw]

module-federation/core#2519 @douglaszaltron I think you can focus on this rfc, module federation that also supports loading application levels

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[bravoy93]

I migrated my micro app in Single-SPA from Webpack to Rspack, and although the application runs without errors in the terminal and my application's UI is displayed, for some reason, Amplify 5 is failing when making all requests, the operations fail in the client itself, they are not even seen in the network tab of the devtools.

Has anyone managed to have an application with Single-SPA + Rspack that uses Amplify, or at least Rspack that has managed to use Amplify? I have searched on the internet, I have used AI and the truth is that I have not achieved results.

[lmichailian]

Hi @bravoy93 can you share an example ?

[ScriptedAlchemy]

If webpack can do it then rspack should be able to as well. Same config will probably work.

[douglaszaltron]

@ScriptedAlchemy With Vite, I managed to get it working using these configurations, but I haven't been able to replicate the same result with Rspack or Rsbuild.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig(() => {
  return {
    server: {
      port: 9000,
    },
    plugins: [
      react(),
    ],
    build: {
      rollupOptions: {
        preserveEntrySignatures: 'strict',
        external: ['react', 'react-dom', 'single-spa-react'],
        input: 'src/root-provider.tsx',
        output: {
          format: 'system',
          entryFileNames: 'root-provider.js',
        },
      },
    },
  };
});