[Bug]: Error identifying the supported ECMAScript version using Browserslist

[lgdevlop]

Version

System:
    OS: Linux 5.15 Arch Linux
    CPU: (12) x64 AMD Ryzen 5 5600 6-Core Processor
    Memory: 12.80 GB / 15.58 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
npmPackages:
    @rsbuild/core: 1.1.10 => 1.1.10 
    @rsbuild/plugin-check-syntax: 1.2.0 => 1.2.0 
    @rsbuild/plugin-react: 1.1.0 => 1.1.0

Details

I am working on a POC with Rsbuild and using the plugin @rsbuild/plugin-check-syntax to validate the bundle output to ensure it complies with the supported browsers specified in the .browserslistrc file.

I noticed that Webpack's runtime uses arrow functions when I specify iOS >= 10, but it does not when I use iOS >= 9. However, I have another browser configured, which is firefox >= 45, and according to Can I Use, this should already justify making the bundle ES5 compatible, meaning no arrow functions or other features that are not supported.

In the link to the CodeSandbox, you can find the mentioned files, including a script to test the logic that @rsbuild/plugin-check-syntax uses to determine the bundle's compatibility (run pnpm test:esm).

By running pnpm build, you can check the error generated by the @rsbuild/plugin-check-syntax plugin and also inspect the bundles in the dist/js folder. If you modify the .browserslistrc file by commenting out iOS >= 10 and uncommenting iOS >= 9, you'll notice that arrow functions will no longer be used, and the issue will shift to something else.

To me, it seems there is some issue with the tooling when using the .browserslistrc file to determine the supported ECMAScript standard.

Reproduce link

https://codesandbox.io/p/devbox/6k7hm4

Reproduce Steps

1. Run pnpm build with the .browserslistrc file configured with iOS >= 10 and note that the error generated by the @rsbuild/plugin-check-syntax plugin is due to the arrow function used by Webpack's runtime.
2. Run pnpm test:esm and verify that the output indicates support for ECMAScript 5.
3. Run pnpm build with the .browserslistrc file configured with iOS >= 9 and note that the error generated by the @rsbuild/plugin-check-syntax plugin is no longer due to the arrow function used by Webpack's runtime; it is a different error.
4. Run pnpm test:esm and verify that the output indicates support for ECMAScript 5.

[chenjiahan]

The check syntax plugin has some limitations, see: https://github.com/rspack-contrib/rsbuild-plugin-check-syntax?tab=readme-ov-file#limitations

In short:

• The transformer is fine-grained. It knows that both iOS 10 and Firefox 45 support arrow functions, so it will output arrow functions.
• The syntax checker is not fine-grained. It only knows that Firefox 45 does not yet fully support ES6, so it will throw an exception for any ES6 syntax, including arrow functions (even though Firefox 45 already supports arrow functions).

[lgdevlop]

Thank you for clarifying the plugin's limitations.
I am closing this issue.