[Bug]: eslint plugin Not working properly

[hatedMe]

Version

System:
    OS: Windows 10 10.0.19045
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
    Memory: 8.38 GB / 31.75 GB
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    @rsbuild/core: ^0.6.8 => 0.6.8 
    @rsbuild/plugin-babel: ^0.6.8 => 0.6.8 
    @rsbuild/plugin-vue2: ^0.6.8 => 0.6.8 
    @rsbuild/plugin-vue2-jsx: ^0.6.8 => 0.6.8   

Details

Using eslint-plugin failed to automatically repair the code. It works normally in @rsbuild/cord@0.4.15, but it does not work properly in version 0.5.0 or above.

I tried it with the official example, but there were also problems.

Example link：
https://github.com/rspack-contrib/rspack-examples/tree/main/rsbuild/vue3-eslint

1. Modify version number

// package.json 
"@rsbuild/core": "^0.4.15",
"@rsbuild/plugin-eslint": "^0.4.15",
"@rsbuild/plugin-vue": "^0.4.15",

2. Add eslint plugin to automatically repair configuration

// rsbuild.config.ts
import { defineConfig } from "@rsbuild/core";
import { pluginVue } from "@rsbuild/plugin-vue";
import { pluginEslint } from "@rsbuild/plugin-eslint";

export default defineConfig({
  plugins: [
    pluginVue(),
    pluginEslint({
      eslintPluginOptions: {
        extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
          fix: true,  
      },
    }),
  ],
});

3. In order to test that the bug is obvious, I added a double quote rule in .eslintrc.cjs

//.eslintrc.cjs
rules : {
    quotes: ["error", "double"],
},

4. When saving the code in index.ts, all single quotes should be changed to double quotes.

// before
import './index.css';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#root');

// after
import "./index.css";
import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#root");

The above code can work normally in @0.4.15, but as long as you upgrade @rsbuild/core, @rsbuild/plugin-eslint, @rsbuild/plugin Problems will occur, there is no automatic fix, @rsbuild/plugin-eslint and eslint-webpack-plugin have similar problems just because the version number has changed, nothing else. Change, could this problem be caused by rspack?

Reproduce link

https://github.com/rspack-contrib/rspack-examples/tree/main/rsbuild/vue3-eslint

Reproduce Steps

1.git clone https://github.com/rspack-contrib/rspack-examples
2.pnpm install
3.cd rsbuild/vue3-eslint
4.pnpm dev

Tasks

Beta Give feedback

No tasks being tracked yet.

[chenjiahan]

It seems like a regression of Rspack, I will transfer this issue to the Rspack repo.

[SharmaTushar]

Using eslint-webpack-plugin@4.1.0 or earlier with rspack causes errors and warnings to be displayed, but displayed errors are not updated in response to code changes. Errors/warning are not displayed when using eslint-webpack-plugin@4.2.0.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[chenjiahan]

@9aoy cc

[9aoy]

This issue is fixed in rspack-contrib/eslint-rspack-plugin#4, you can useeslint-rspack-plugin instead of eslint-webpack-plugin, or upgrade @rsbuild/plugin-eslint to 1.0.2.