Help needed migrating Craco monorepo to RsBuild

[RBilly]

Hi !
First of all, I follow the evolution of the rspack project since its early phase and I can't express how happy I am to see the results you achieved. So congrats to all contributors of this project !
With the 1.0.0 release of RsBuild I saw it as an opportunity to convince the teams at work to migrate our good old Craco monorepo to the blazing fast RsBuild (currently 1.0.14).
I've been able to migrate some modules already which is great but I've encountered an issue in one of them that I was not able to resolve by myself, so I've come seeking help.
To give more information on the current setup, we use Craco 7.x (so based on webpack 5.x), and the craco config looks like this:

const CracoAlias = require('craco-alias');

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.resolve.fallback = {
        querystring: false,
        net: false,
      };
      return webpackConfig;
    },
  },
  jest: {
    // jest config
  },
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: '.',
        tsConfigPath: './tsconfig.paths.json',
      },
    },
  ],
};

The module that fails to build with RsBuild is using a web worker and I get the following error:

File: project_folder\Trends\front-end\src\containers\HistoricalLiveChartContainer\worker.js:1:1
  × Module build failed:
  ╰─▶   × Error:   × TypeError: Cannot read properties of undefined (reading 'tap')
        │   │     at Object.fn (project_folder\node_modules\.pnpm\[email protected]\node_modules\webpack\lib\javascript\ArrayPushCallbackChunkFormatPlugin.js:30:58)
        │   │     at SyncHook.callAsyncStageRange (project_folder\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:240:21)
        │   │     at SyncHook.callStageRange (project_folder\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:259:14)
        │   │     at QueriedHook.call (project_folder\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:218:26)
        │   │     at project_folder\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\Compiler.js:568:21
        │   │     at last.function (project_folder\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\Compiler.js:856:28)
        │   │
        │
        │

error   Failed to build.
error   Rspack build failed!
    at file:///project_folder/node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.js:9272:20
    at finalCallback (project_folder\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\Compiler.js:299:21)
    at project_folder\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\Compiler.js:322:36
    at done (project_folder\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:473:13)
    at promise.then.index (project_folder\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:493:25)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

For the rest, I followed the official guide of migration from CRA with sass and svgr plugins

I'm very grateful of any help that can be provided.

[9aoy]

Can you provide a reproduction repository or online demo?

[chenjiahan]

Thanks for your kind words!

We can see that the error stack contains "webpack\lib\javascript\ArrayPushCallbackChunkFormatPlugin.js", which is a webpack internal plugin and should not be used in Rspack and Rsbuild projects. This exception is likely related to it. If you can provide a reproduction, we can help further investigate.

[RBilly]

Since I could not publish internal code, I tried to reproduce the issue with a minimal setup which gave me a hunch. And I found what was causing the issue. It was the usage of workerize-loader. By removing it, the module build just fine.
Since the issue is caused by the inner working of workerize-loader, I don't think your team can do anything about that.
If you are still interested and think there is something to be done, I'll gladly give more effort to provide you a reproduction repository.

[chenjiahan]

Thanks for the information, I checked the source code of workerize-loader, it depends on some webpack internal modules so it cannot be used in Rspack or Rsbuild projects. https://github.com/developit/workerize-loader/blob/main/src/index.js#L4-L6

The reproduction is no longer needed, thanks!