[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 rsbuild@1.0.4 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

[9aoy]

delete style tag & throw Cannot read properties of undefined (reading 'content') error in Rsbuild 1.0.4

+1. It can also be reproduced in the rsbuild example.

https://github.com/web-infra-dev/rsbuild/tree/main/examples/vue

[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!

[ZhangTaibin]

Rspack Cli is done. But Rsbuild is not done.

This use Rsbuild:

This use Rspack Cli:

[CPunisher]

Let's say module A imports module B by one of A's loaders with importModule:
In the initial build, when A is being built, B is executed so everything is ok.
In the hmr rebuild, B is being rebuilt before A by the following code. But actually B should not be built since there's no style block in A.

rspack/crates/rspack_core/src/compiler/module_executor/mod.rs

Line 68 in 3050931

make_artifact = update_module_graph(compilation, make_artifact, params)

I come up with 3 solutions:

1. Add undefined checks for vue-loader, which is the most easy way.
2. Merge the executor artifact into the main artifact. This solution was once rejected.
3. Do not rebuild B ahead. Instead, let A introduce B again. I'm not sure this solution introduces other problems.