Vite+React+Symfony+Docker环境下HMR热更新不显示求助

问题现象 #

• CLI输出和浏览器控制台均能检测到React组件文件变更，例如：

  CLI: [vite] hmr update /assets/pages/start.tsx
  Browser console: [vite] hot updated: /assets/pages/start.tsx

• 浏览器页面未自动展示组件更新效果，必须手动刷新页面才能看到变更
• CSS文件变更可实时在浏览器中显示，仅React组件更新存在该问题

环境配置 #

• 系统：Ubuntu Linux 22.04
• 运行环境：Docker，已将80、443、3000、5173端口映射至宿主机对应端口，容器内包含PHP8.2、NodeJS（使用yarn）
• 技术栈：Symfony 6.2 + pentatrion/vite-bundle，React应用文件存放于项目根目录的assets文件夹中

当前Vite Server配置 #

server: {
    host: true,
    hmr: {
        host: 'localhost',
    }
},

已尝试的解决方案 #

• 开启HMR的usePolling配置
• 更换HMR监听端口
• 配置HMR的path: '/socket.io'
• 已配置react_refresh.js并作为入口在React应用前加载，代码如下：

import RefreshRuntime from "react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true

请问是否有人遇到过类似的HMR热更新已检测到但浏览器不展示React组件变更的问题？

内容的提问来源于stack exchange，提问作者dependent