[Bug]: Upgrade from v1.1.14 to 1.2.0 is breaking the stylus plugin

[binarykitchen]

Version

System:
    OS: Linux 6.12 EndeavourOS
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 5.98 GB / 15.46 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh

  Browsers:
    Chromium: 132.0.6834.110

  npmPackages:
    @rsbuild/core: 1.2.0 => 1.2.0 
    @rsbuild/plugin-node-polyfill: 1.2.0 => 1.2.0 
    @rsbuild/plugin-pug: 1.0.2 => 1.0.2 
    @rsbuild/plugin-react: 1.1.0 => 1.1.0 
    @rsbuild/plugin-stylus: 1.0.7 => 1.0.7 
    @rsbuild/plugin-svgr: 1.0.6 => 1.0.6

Details

Until v1.1.14 I had no issues with your @rsbuild/plugin-stylus plugin. With the bump to v1.2.0 I can't use stylus at all anymore. It now believes it's an invalid javaScript file :(

See error output below:

error   Compile error: 
Failed to compile, check the errors for troubleshooting.
File: /home/michael-heuberger/code/binarykitchen/videomail.io/src/client/assets/styl/site.styl:1:1
  × Module parse failed:
  ╰─▶   × JavaScript parsing error: Expression expected
         ╭─[2:0]
       1 │ // load constants first
       2 │ @import './../../../common/assets/styl/imports/constants/colors'
         · ─
       3 │ @import './../../../common/assets/styl/imports/constants/dimensions'
       4 │ @import './../../../common/assets/styl/imports/constants/fonts'
         ╰────
      
  help: 
        To enable support for Stylus, use "@rsbuild/plugin-stylus".

 @ ./src/client/index.tsx

error   Failed to build.
error   Rspack build failed!
    at file:///home/michael-heuberger/code/binarykitchen/videomail.io/node_modules/@rsbuild/core/dist/index.js:5534:87
    at finalCallback (/home/michael-heuberger/code/binarykitchen/videomail.io/node_modules/@rsbuild/core/node_modules/@rspack/core/dist/index.js:13712:9)
    at /home/michael-heuberger/code/binarykitchen/videomail.io/node_modules/@rsbuild/core/node_modules/@rspack/core/dist/index.js:13744:16
    at done (/home/michael-heuberger/code/binarykitchen/videomail.io/node_modules/@rspack/lite-tapable/dist/index.js:473:13)
    at promise.then.index (/home/michael-heuberger/code/binarykitchen/videomail.io/node_modules/@rspack/lite-tapable/dist/index.js:493:25)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

Thanks for fixing.

Reproduce link

https://github.com/web-infra-dev/rsbuild/blob/main/packages/plugin-stylus/tests/index.test.ts

Reproduce Steps

Your quickstart example at https://rsbuild.dev/plugins/list/plugin-stylus isn't being unit tested here:
https://github.com/web-infra-dev/rsbuild/blob/main/packages/plugin-stylus/tests/index.test.ts

Add unit tests for this and you will see ;)

[chenjiahan]

Hi, we have some E2E tests for Stylus and they work as expected: https://github.com/web-infra-dev/rsbuild/tree/main/e2e/cases/stylus.

I have also tried to create a new project and it also works:

[github-actions]

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

[binarykitchen]

Thank you, @chenjiahan, I fully respect that you wish for a reproductive case. All my attempts have failed so far.

It happens in a large, complex project of mine with plenty of configurations. This error was never thrown before you released version 1.2.0. This makes me believe there was some breaking change inside v1.2.0 we all aren't aware of.

The big question: why does rsbuild think the Stylus file is a JavaScript file? Stylus !== JavaScript.

File: /home/michael-heuberger/code/binarykitchen/videomail.io/src/client/assets/styl/site.styl:1:1
  × Module parse failed:
  ╰─▶   × JavaScript parsing error: Expression expected

Can I somehow run rsbuild in debug mode to see a more complete error stack trace?

error   Rspack build failed!
    at file:///home/michael-heuberger/code/binarykitchen/videomail.io/node_modules/@rsbuild/core/dist/index.js:5536:87
    at finalCallback (/home/michael-heuberger/code/binarykitchen/videomail.io/node_modules/@rspack/core/dist/index.js:14563:9)
    at /home/michael-heuberger/code/binarykitchen/videomail.io/node_modules/@rspack/core/dist/index.js:14595:16
    at done (/home/michael-heuberger/code/binarykitchen/videomail.io/node_modules/@rspack/lite-tapable/dist/index.js:473:13)
    at promise.then.index (/home/michael-heuberger/code/binarykitchen/videomail.io/node_modules/@rspack/lite-tapable/dist/index.js:493:25)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

This current output isn't very helpful to narrow down the cause.

[chenjiahan]

Rspack will treat unknown module types as JavaScript module by default. So when you see this error, it's usually because the loader is not configured as expected.

Can you provide the full Rspack config? You can enable the debug mode to print the config file. https://rsbuild.dev/guide/debug/debug-mode

[binarykitchen]

Ok, thanks.

The debug mode produced 2 files:

• https://gist.github.com/binarykitchen/64167e8aea6a05a0120b178267773813
• https://gist.github.com/binarykitchen/39de7e07fc000a5ec9c60666fa939e4b

And here is the original rsbuild config file in TS:
https://gist.github.com/binarykitchen/57e8f23dd812e3abb93a915e85cb1810

Hope this helps.

[chenjiahan]

Thanks for providing the detailed configuration file. This problem occurs because Rsbuild v1.2 does not correctly handle plugins registered in environments as expected.

I will release a patch version soon.

[binarykitchen]

Awesome! Please include me in the PR @chenjiahan

[binarykitchen]

Never mind, I've found your commit and added some comments.

[binarykitchen]

Tested the new release and works well. Thanks for the quick fix.