[Bug]: When modifying files (occasionally) or rsbuild.config.ts (must be), the generated product has problems

[jameszhang2020]

Version

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M3
    Memory: 111.56 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.12.2/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 9.1.4 - ~/.nvm/versions/node/v20.12.2/bin/pnpm
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 17.4.1

Details

I have shared multiple packages in the module federation host, and the configuration is as follows.

// rsbuild.config.ts
...
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack'
import pkgInfo from './package.json'
...

export default defineConfig(({env, command, envMode}) => {
  return {
    ...
    tools: {
      rspack: {
        plugins: [
          new ModuleFederationPlugin({
            name: 'runtime',
            shared: {
              react: { singleton: true, requiredVersion: pkgInfo.dependencies.react },
              'react-dom': {
                singleton: true,
                requiredVersion: pkgInfo.dependencies['react-dom']
              },
              '@cb/sdk': { singleton: true },
              '@cb/react-portal-provider': { singleton: true },
              '@cb/react-theme-provider': { singleton: true },
              '@cb/react-viewport-provider': { singleton: true },
              '@cb/react-box': { singleton: true },
              '@cb/react-flex': { singleton: true },
              '@cb/react-panel': { singleton: true },
              '@cb-app/workspace-context': { singleton: true },
              '@cb-app/common': { singleton: true },
              '@cb-app/core-api': { singleton: true },
              '@cb-app/points': { singleton: true },
              '@cb-app/messenger': { singleton: true },
              '@cb-app/components': { singleton: true },
              '@cb-app/shared-points': { singleton: true },
              '@cb/logger': { singleton: true },
              '@cb/editor': { singleton: true },
              lodash: { singleton: true },
              'styled-components': { singleton: true }
            }
          })
        ]
      }
    }
  }
})

On first startup, it will generate a set of configurations that can be found in the entry file (index.js), like this:

__webpack_require__.initializeSharingData = {
  scopeToSharingDataMapping: {
    "default": [
        {
            "name": "@cb/sdk",
            "version": "1.32.0",
            "factory": function(){
                     return __webpack_require__.e("verdors-node_module_cb_sdk_dist_sdk_index_js").then(function(){
                           return function(){ return __webpack_require__("../../node_modules/@cb/sdk/dist/index.js" }
                      })
             }
        },
       ...more
    ]
  }
}

However, when I edited a ts file or rsbuild.config.ts file, saved it, and then checked it again, I found that it became empty, as shown below:

__webpack_require__.initializeSharingData = {
  scopeToSharingDataMapping: {
    "default": []
  }
}

Other remotes will depend on these shared packages, so this initializeSharingData.scopeToSharingDataMapping is very important

I also created an issue in module federation, but they asked me to create an issue here directly.

Reproduce link

N/A

Reproduce Steps

1. Based on an old webpack5 project (project using module federation) migrate to Rsbuild
2. Introduce the module federation plug-in and configure a host and remotes
3. Share multiple packages in the host (refer to the configuration example above, because it is an internal project, it is not convenient to show specific information)
4. yarn dev
5. Edit js/ts/tsx/jsx files or modify rsbuild.config.ts files, save and access the local, and find that the content of __webpack_require__.initializeSharingData in the index.js file generated after packaging is different before and after (as described above). If this variable has a normal value, our project can work normally, otherwise it will not work.
6. When a problem occurs, manually stop the process and re-execute yarn dev (rsbuild dev), the index.js file will be normal, but doing so will greatly affect the local development efficiency

[github-actions[bot]]

Hello @jameszhang2020. Please provide a reproduction repository or online demo. For background, see Why reproductions are required. Thanks ❤️

[chenjiahan]

Hi, can you provide a minimal reproduction for this?

[jameszhang2020]

@chenjiahan https://github.com/TD-jameszhang/rsbuild-demo.git In this repo, after I upgraded to the latest version of rsbuild/core, it reported this error first (which prevented me from reproducing the original problem) Reproduce Steps:

1. yarn
2. yarn workspace @demo/host run dev
3. yarn workspace @demo/remote run dev
4. Modify the App.tsx file in @demo/host, for example, add a console.log, it will correct the following error

Maybe, it need to fix this problem first before I can reproduce the abnormal phenomenon reported first.

[jameszhang2020]

By the way, Is this correct? It looks weird. Because the current @rspack/core of this project is already version 0.7.1

[chenjiahan]

In this repo, after I upgraded to the latest version of rsbuild/core, it reported this error first

This is a bug of Rspack and has been fixed, see: https://github.com/web-infra-dev/rspack/issues/6740

You can upgrade Rsbuild to v0.7.7 and the live reload / HMR should work

[chenjiahan]

By the way, Is this correct? It looks weird. Because the current @rspack/core of this project is already version 0.7.1

This is a devDependency, it will not affect your project, so you can just ignore it

[chenjiahan]

Can you try the latest Rsbuild version and check if the problem has been resolved?

[jameszhang2020]

OK, got it. I'll verify it later and contact you if I have any news.

[jameszhang2020]

The HMR problem should be fixed. However, the problem I mentioned at the beginning still exists. Here are the results after I ran it:

But I expect it to work properly, as shown below(There are detailed descriptions in the issue):

I have uploaded the code to the repo, could you please take a look at it?

[ScriptedAlchemy]

@chenjiahan bumping this. Could it be related to lazy compile? Not sure why the scope would reset like this

[chenjiahan]

I tried to modify .ts files or the rsbuild config file, but I can not reproduce the error:

And the project does not have lazyCompilation enabled, so it should not be related to lazy

[ScriptedAlchemy]

I'll try playing with it too and see if I can reproduce anything