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.

Sign up for GitHub

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

Jump to bottom

Rsbuild React 微前端应用 CSS 热更新失败 #1510

Open
chenhuang444 opened this issue Jan 21, 2025 · 1 comment
Open

Rsbuild React 微前端应用 CSS 热更新失败 #1510

chenhuang444 opened this issue Jan 21, 2025 · 1 comment
Assignees
@sea-chao

Comments

@chenhuang444
Copy link

问题描述

微前端使用 Rsbuild 构建 React 应用时，css 样式的热更新会失败。
iframe, sandbox 模式都有问题。tsx 文件更新可以生效。

复现步骤

  1. 使用 rsbuild 工具创建 react 应用。开始调试
  2. 修改 css 样式文件，无法热更新

复现仓库

https://github.com/chenhuang444/micro-app-example/tree/demo/rsbuild
branch: demo/rsbuild

跑起项目

pnpm install
pnpm dev

环境信息

  • micro-app版本：1.0.0-rc.19
  • 主应用前端框架&版本：react@^18.3.12
  • 子应用前端框架&版本：react@^18.3.12
  • 构建工具&版本：@rsbuild/[email protected], @rsbuild/[email protected]
@chenhuang444
Copy link
Author

看了下 rsbuild 热更新的方式，会有点问题。
dev 时注入的 cssExtractHmr.js 执行 reloadAll 触发 css 文件加载。但是这里用 querySelectorAll('link')

Image

这时候 micro-app 已经把 link 拦截并替换成 <style/>，注入到 <micro-app-head /> 中。所以 rsbuild 热更新无法找到需要更新的 link

rsbuild dev 时生成的入口文件是这样的

<!doctype html>
<html>
   <head>
      <title>Rsbuild App</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script defer src="/static/js/lib-react.js"></script><script defer src="/static/js/vendors-node_modules_pnpm_rspack_core_1_1_8__swc_helpers_0_5_15_node_modules_rspack_core_dist-34ccef.js"></script><script defer src="/static/js/index.js"></script>
      <link href="/static/css/index.css" rel="stylesheet">
   </head>
   <body>
      <div id="root"></div>
   </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sea-chao sea-chao

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@chenhuang444 @sea-chao