[Bug]: "The 'compilation' argument must be an instance of Compilation error" after upgrade to v1.3.0

[axetroy]

Version

System:
    OS: Windows 10 10.0.19045
    CPU: (32) x64 Intel(R) Xeon(R) CPU E5-2670 0 @ 2.60GHz
    Memory: 15.72 GB / 47.92 GB
  Binaries:
    Node: 16.20.2 - C:\Program Files\nodejs\node.EXE      
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD        
    npm: 6.14.18 - C:\Program Files\nodejs\npm.CMD        
  Browsers:
    Edge: Chromium (134.0.3124.93)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @rsbuild/core: ^1.2.19 => 1.3.0 
    @rsbuild/plugin-babel: ^1.0.4 => 1.0.4 
    @rsbuild/plugin-less: ^1.1.1 => 1.2.1 
    @rsbuild/plugin-sass: ^1.2.2 => 1.2.2 
    @rsbuild/plugin-stylus: ^1.0.8 => 1.1.1
    @rsbuild/plugin-vue2: ^1.0.2 => 1.0.2
    @rsbuild/plugin-vue2-jsx: ^1.0.3 => 1.0.3

Details

It works fine in 1.2.19, but fail when upgrade to 1.3.0

> cross-env NODE_ENV=production rsbuild build

  Rsbuild v1.3.0

error   Failed to build.
error     × TypeError: The 'compilation' argument must be an instance of Compilation
  │     at Function.value [as getCompilationHooks] (/drone/src/packages/project/node_modules/@rspack/core/dist/index.js:5210:13)
  │     at Object.fn (/drone/src/packages/project/node_modules/vue-loader/lib/plugin-webpack5.js:53:22)
  │     at SyncHook.callAsyncStageRange (/drone/src/packages/project/node_modules/@rspack/lite-tapable/dist/index.js:240:21)
  │     at SyncHook.callStageRange (/drone/src/packages/project/node_modules/@rspack/lite-tapable/dist/index.js:259:14)
  │     at QueriedHook.call (/drone/src/packages/project/node_modules/@rspack/lite-tapable/dist/index.js:218:26)
  │     at /drone/src/packages/project/node_modules/@rspack/core/dist/index.js:13111:26
  │     at last.function (/drone/src/packages/project/node_modules/@rspack/core/dist/index.js:14012:25)
  │ 

Reproduce link

x

Reproduce Steps

1. run rsbuild command

[github-actions]

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

[felixmosh]

Same here, I'm not using vue-loader (a React project)...

File: /Users/xxxx/Projects/node/xxxx/apps/market/src/client/styles/index.css:1:1
  × Module build failed:
  ╰─▶   × TypeError: The 'compilation' argument must be an instance of Compilation
        │     at Function.value [as getCompilationHooks] (/Users/xxxx/Projects/node/xxxx/node_modules/@rspack/core/dist/index.js:5210:13)
        │     at runLoaders (/Users/xxxx/Projects/node/xxxx/node_modules/@rspack/core/dist/index.js:5886:34)

[Rain3ow]

Same issue for me as well using React.

I was able to kind of isolate its behavior to the usage of 2 RsPack plugins: CopyRspackPlugin and CircularDependencyRspackPlugin.
If one these 2 plugins were used I got the above error otherwise I got no error.

Managed to temporally bypass this error using a canary version of RsPack: @rspack-canary/[email protected]

So for everyone interested this is the change I did in my package-lock.json:

"node_modules/@rsbuild/core": {
            "version": "1.3.0",
            "resolved": "https://registry.npmjs.org/@rsbuild/core/-/core-1.3.0.tgz",
            "integrity": "sha512-+b+qJ0lOHji6JYSsmtiz/u/KasaD5AmGHahtgWDhNQ4dqCl2lqyn9hta2FeK7ic0Gb3RDItMpOpHreC4+WJ8xA==",
            "dev": true,
            "license": "MIT",
            "dependencies": {
                "@rspack/core": "npm:@rspack-canary/[email protected]",
                "@rspack/lite-tapable": "~1.0.1",
                "@swc/helpers": "^0.5.15",
                "core-js": "~3.41.0",
                "jiti": "^2.4.2"
            },
            "bin": {
                "rsbuild": "bin/rsbuild.js"
            },
            "engines": {
                "node": ">=16.7.0"
            }
        },

Hopefully this issue will be solved in the upcoming version of RsPack.

@chenjiahan nice job you did with the whole ecosystem you're building and improving - I am impressed (migrating from CRACO to RsBuild) - keep up the good work!

Thanks!

[chenjiahan]

@Rain3ow Thank you for your information, it is very helpful ❤️. We will fix this issue soon.

[zhouxinyong]

the same issue +1

[chenjiahan]

For Rsbuild users, if you are importing rspack from @rspack/core, importing rspack from @rsbuild/core solves the problem, this ensures that the same Rspack instance is used.

// rsbuild.config.ts
- import { rspack } from "@rspack/core";
+ import { rspack } from '@rsbuild/core';

export default {
  // ...
};

https://rsbuild.dev/api/javascript-api/core#rspack

[Rain3ow]

For Rsbuild users, if you are importing rspack from @rspack/core, importing rspack from @rsbuild/core solves the problem, this ensures that the same Rspack instance is used.

// rsbuild.config.ts

• import { rspack } from "@rspack/core";

• import { rspack } from '@rsbuild/core';

export default {
// ...
};

https://rsbuild.dev/api/javascript-api/core#rspack

It works like a charm! Thank you!

[chenjiahan]

Upgrading @rsbuild/core to v1.3.1 should also fix this issue: https://github.com/web-infra-dev/rsbuild/releases/tag/v1.3.1