[Bug]: Strange HMR bug after removing <style> in Vue SFC

[ZhangTaibin]

Version

System: Window
Browser: Edge
vue: 2/3
and others node js 18/20

Details

i just create a pure project with pnpm create rsbuild@latest.

And then run the project with pnpm run dev . it's ok and i dont edit anything.

when i delete <style></style element in App.vue. It will throw an error writting "Cannot read properties of undefined (reading 'call')". Then i stop the HMR and run the project again. It will be OK.

I think that it has some strange problem with HMR

Reproduce link

not link

Reproduce Steps

pnpm create rsbuild@latest

cd project

pnpm i

pnpm run dev

delete style element in App.vue

[CPunisher]

i cant reproduce with rspack.
after debugging with rsbuild, I find vue style query triggers vue-loader before the vue file does, which is difference from the correct orders in rspack. The vue loader throws errors since there is no style block in the descriptor when handling the style query.

[CPunisher]

I reproduce with the following rspack config:

const rspack = require('@rspack/core');
const { VueLoaderPlugin } = require('vue-loader');

/** @type {import('@rspack/cli').Configuration} */
const config = {
  entry: './src/index.js',
  plugins: [
    new VueLoaderPlugin(),
    new rspack.HtmlRspackPlugin({}),
    new rspack.CssExtractRspackPlugin({
      runtime: false,
    }),
  ],
  // experiments: {
  //   css: true,
  // },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: rspack.CssExtractRspackPlugin.loader, options: {} },
          'css-loader',
        ],
        type: 'javascript/auto',
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // Note, for the majority of features to be available, make sure this option is `true`
          experimentalInlineMatchResource: true,
        },
      },
    ],
  },
};
module.exports = config;

My guess about the process:
CssExtractRspackPlugin loader calls this.importModule, which introduce an extra module that derives from the css module generated by vue-loader (App.vue?type=style). This extra module is handled by ModuleExecutor. When the style block in the vue file is removed, rspack calls ModuleExecutor::hook_before_make to rebuild the extra module before rebuilding others. When vue-loader processes the extra module, error is thrown since there is no style block in the vue descriptor.

[hardfist]

this should be fixed in #7878 and released in 1.0.5, @CPunisher can you help verify it

[hardfist]

@ZhangTaibin please try 1.0.5

[ZhangTaibin]

It's done when use Rspack CLI to create project.

When use [email protected] to create project. If i change CSS content, it's done.

But it's not done when i delete style tag or clear all CSS content. it throw an error Cannot read properties of undefined (reading 'content')

System: Windows 11
Node: 18
Rsbuild: 1.0.4