[Bug]: About Vue 3 hot update

[MinGuoGuo]

Version

mac m1pro
chorme
rsbuild最新版本

Details

我用rsbuild新建的vue3模板，热更新是对当前页面的全量替换，不会保留当前页面的state，我只是在template里面更新了ui，script里面的state都会重新初始，感觉这样体验很不好，这一点的表现和webpack，vite都有所不同。复现仓库链接：https://gitee.com/xiangminya/rsbuild-hmr 该仓库里面分别用rsbuild和vite初始化了一个项目，修改UI热跟新表现不一致

Reproduce link

https://gitee.com/xiangminya/rsbuild-hmr

Reproduce Steps

详细问题可到仓库查看

[witsaint]

@chenjiahan This Issure looks like it came from rspack. I started the service with Rpack and liveReload was still working。

[witsaint]

HMR took effect when I set devtool: false

[chenjiahan]

Maybe related to Vue itslef? https://github.com/vuejs/core/issues/3250

[MinGuoGuo]

@chenjiahan oh my god，看起来他们那个issue已经open长达三年时间了😭

[witsaint]

I have run it with webpack and hmr can work normally, which is not the same as the vue issue

[MinGuoGuo]

@witsaint Yes, HMR can run normally in both webpack and Vite, so I don't know why it doesn't work properly in RSBuild

[SoonIter]

Related to the template caching feature in vite-plugin-vue https://github.com/vitejs/vite-plugin-vue/pull/386?open_in_browser=true

But the template caching is not available in vue-loader

[witsaint]

@chenjiahan Over the weekend, I probably found out the reason: the module returned in hot.xx.js does not match the moduleid of hot.accept in the code inserted by vue-loader. There are too many modules returned, and due content will be overwritten in runtime, so the callback of hot.accept is not executed

[witsaint]

Key code in hmr

[MinGuoGuo]

@chenjiahan dalao，will this be fixed as a bug in future versions

[chenjiahan]

Yes it should be fixed if it is a bug of Rspack. PR welcome~

[MinGuoGuo]

@witsaint 大佬提个pr给修复下呗，菜鸡膜拜

[wanghao1993]

@chenjiahan dalao，will this be fixed as a bug in future versions

笑死了哥，dalao 这翻译666

[MinGuoGuo]

@chenjiahan dalao，will this be fixed as a bug in future versions

笑死了哥，dalao 这翻译666

你就说能不能看懂吧

[MinGuoGuo]

@chenjiahan Hello, excuse me, when can this be fixed

[chenjiahan]

@9aoy cc

[9aoy]

@MinGuoGuo can you add a permission for me. https://gitee.com/xiangminya/rsbuild-hmr

[MinGuoGuo]

@MinGuoGuo can you add a permission for me. https://gitee.com/xiangminya/rsbuild-hmr

那个仓库已经被我删掉了，这个也可以复现，https://gitee.com/xiangminya/rsbuild-demo，具体问题是保存代码热更新的时候会重载整个页面，使整个页面状态初始化，这点和webpack、vite的表现不一样，期望是热更新只更新修改部分，不对整个页面进行reload初始化。----------辛苦大佬了，😄

[9aoy]

It seems that there is a problem with rspack's updatedModules calculation when sourcemap is included.

There is no change in the content or sourcemap (sourcemap is a new object, but the actual content has not changed) of App.vue.js?vue&type=script, but it is still added to updatedModules.

Addition:

• When I only return content in vue-loader without sourcemap, it is normal.
• It's also normal when I add additional js loaders to just return the content.

Reproduce demo(can compare webpack / test loader): https://github.com/9aoy/rspack-issue-reproduce/tree/main/rspack-vue

[9aoy]

Maybe related https://github.com/vuejs/vue-loader/issues/1795.

If devtool is set to source-map in webpack, this problem will also occur.

The temporary solution in Rsbuild is:

export default {
  output: {
    sourceMap: {
      js: 'eval' // or false
    },
  },
};

[MinGuoGuo]

Maybe related vuejs/vue-loader#1795.

If devtool is set to source-map in webpack, this problem will also occur.

The temporary solution in Rsbuild is:

export default {
  output: {
    sourceMap: {
      js: 'eval' // or false
    },
  },
};

I tried it and it still didn't perform well, but I'm still grateful 😭

[TedEva]

我也是这个问题 ，修改一个文件感觉所有文件都跑了一遍，热更跟冷启动耗时差不多。解决了踢我一下

[9aoy]

This problem is not an rspack / webpack bug, but you can enable incremental rebuild to speed up the rebuild speed. see: https://rspack.dev/blog/announcing-1-1#new-incremental-rebuild

[niksy]

Maybe this can be resolved if Vite version of Vue plugin is used?

If Unplugin version is used, only HMR support is current blocker AFAIK.

I’ve asked potentially related question: https://github.com/web-infra-dev/rsbuild/issues/3182

If Rspack and Rsbuild can use Vite implementation as opposed to unmaintained vue-loader implementation, a lot of the weird issues and bugs could be fixed.

[chenjiahan]

I'm open to switching to unplugin-vue since it's better maintained than vue-loader.

HMR is still a blocking point, it would be great if anyone would add Rspack HMR support to unplugin-vue.

[niksy]

Great!

The thing is, vue-loader seems like it’s in a low priority maintenance mode and there aren’t any signals or activity from core maintainers on long standing issues. Everything seems focused on Vite support and it’s a shame that crucial element for Vue usage in Rspack/Rsbuild is left to unmaintained dependancy and still relying on Webpack as main dependancy.

If this component can be switched to unplugin-vue, I think Rspack/Rsbuild could benefit from that, and this will also affect other parts such as Nuxt, greater adoption rate, etc.

[huxinhai]

我使用react也是这个问题 修改一个文件感觉所有文件都跑了一遍，热更跟冷启动耗时差不多

[MinGuoGuo]

Okay, this issue looks like it's currently unsolvable，it's driving me crazy

I'm open to switching to unplugin-vue since it's better maintained than vue-loader.

HMR is still a blocking point, it would be great if anyone would add Rspack HMR support to unplugin-vue.

[MinGuoGuo]

I'm open to switching to unplugin-vue since it's better maintained than vue-loader.

HMR is still a blocking point, it would be great if anyone would add Rspack HMR support to unplugin-vue.

@sxzz ，Hi， Brother, perhaps only you can provide help

[sxzz]

Unfortunately, I am not familiar with the HMR API of Webpack/Rspack. Since unplugin-vue is an open-source project, I believe that others can contribute to it as well.

See https://github.com/unplugin/unplugin-vue/issues/162#issuecomment-2254275628