[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? vuejs/core#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
vitejs/vite-plugin-vue#386

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 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
    },
  },
};

[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