Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Garfish 微前端,子应用在主应用中时,热更新失效 #2935

Closed
xlsama opened this issue Jul 16, 2024 · 5 comments
Closed
Labels
🐞 bug Something isn't working

Comments

@xlsama
Copy link

xlsama commented Jul 16, 2024

Version

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 8.29 GB / 32.00 GB
    Shell: 3.7.0 - /opt/homebrew/bin/fish
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5

Details

Garfish 微前端框架,主子应用本地启动,子应用独立运行,热更新正常,在主应用中运行,热更新失效。

依赖版本:
garfish:1.19.2
@garfish/bridge-react-v18:1.19.2
@rsbuild/core:1.0.1-beta.1
@rsbuild/plugin-react:1.0.1-beta.1

按照文档改了改,怎么都不好使,参考的文档:

hot-update.js 中请求返回的内容是最新的代码,看起来像是没有符合 React 对热更新的要求,辛苦大佬帮忙看看,感谢 ❤️ 。

Reproduce link

https://github.com/xlsama/rsbuild-demo

Reproduce Steps

  1. 启动主子应用 pnpm dev,主应用地址:http://localhost:3000,子应用地址:http://localhost:3001
  2. 进入主应用地址 http://localhost:3000, 修改子应用 react-sub/src/App.tsx 中的代码,http://localhost:3001 热更新正常,http://localhost:3000 热更新失效。
@xlsama xlsama added the 🐞 bug Something isn't working label Jul 16, 2024
@xlsama xlsama closed this as completed Jul 16, 2024
@xlsama
Copy link
Author

xlsama commented Jul 16, 2024

主应用关闭 hmr 就好了 🌚

  dev: {
    hmr: false,
  },

@xmsz-stu
Copy link

主应用关闭 hmr 就好了 🌚

  dev: {
    hmr: false,
  },

那主应用还可以热更新吗

@xlsama
Copy link
Author

xlsama commented Aug 16, 2024

主应用关闭 hmr 就好了 🌚

  dev: {
    hmr: false,
  },

那主应用还可以热更新吗

主应用会降级为 liveReload,我感觉用起来和热更新区别不大
https://rsbuild.dev/zh/guide/advanced/hmr#hmr-%E5%BC%80%E5%85%B3

@xlsama
Copy link
Author

xlsama commented Aug 16, 2024

上面这个可以解决 js 的热更新问题。

我发现 Garfish 默认会把子应用的样式资源转换成 style 标签,所以 css 热更新需要把 disableLinkTransformToStyle 改成 true

  Garfish.run({
    basename: '/',
    disablePreloadApp: true,
    sandbox: {
      // 解决子应用在微前端环境下的 css 热更新问题
      disableLinkTransformToStyle: true,
    },
  })

@xmsz-stu
Copy link

上面这个可以解决 js 的热更新问题。

我发现 Garfish 默认会把子应用的样式资源转换成 style 标签,所以 css 热更新需要把 disableLinkTransformToStyle 改成 true

  Garfish.run({
    basename: '/',
    disablePreloadApp: true,
    sandbox: {
      // 解决子应用在微前端环境下的 css 热更新问题
      disableLinkTransformToStyle: true,
    },
  })

能不能同时关闭sandbox和 disableLinkTransformToStyle: true,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants