Vite新版本修改触发整页重载，添加HMR代码后构建失败求助

问题描述 #

升级到Vite v4.4.8后，无论是修改文本还是移除标题标签，都会触发整页重载而非HMR热更新。此前使用Vite 3.0.*版本时HMR功能正常，升级后开发体验下降。尝试在index.js中添加import.meta.hot.accept()解决重载问题，但构建时出现以下错误：

index-f28df0af.js:1195  Uncaught TypeError: Cannot read properties of undefined (reading 'accept')
    at index-f28df0af.js:1195:82439
    at index-f28df0af.js:1:23
    at index-f28df0af.js:1195:82709

项目文件 #

package.json #

{
    "name": "Lala-Intl",
    "homepage": "http://lalaintltravel.pk/",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.2.0",
        "@fortawesome/free-regular-svg-icons": "^6.2.0",
        "@fortawesome/free-solid-svg-icons": "^6.2.0",
        "@fortawesome/react-fontawesome": "^0.2.0",
        "@mui/icons-material": "^5.14.3",
        "@mui/x-date-pickers-pro": "^6.6.0",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "@vitejs/plugin-react": "^4.0.4",
        "antd": "^5.8.1",
        "axios": "^0.27.2",
        "jquery": "^3.6.1",
        "mdb-react-ui-kit": "^6.1.0",
        "moment": "^2.29.4",
        "pickadate": "^3.6.4",
        "react": "^18.2.0",
        "react-bootstrap": "^2.5.0",
        "react-date-range": "^1.4.0",
        "react-datepicker": "^4.12.0",
        "react-dom": "^18.2.0",
        "react-helmet": "^6.1.0",
        "react-multi-carousel": "^2.8.2",
        "react-redux": "^8.1.2",
        "react-router-dom": "^6.13.0",
        "react-select": "^5.7.4",
        "react-spinners": "^0.13.8",
        "redux": "^4.2.1",
        "redux-persist": "^6.0.0",
        "redux-thunk": "^2.4.2",
        "usehooks-ts": "^2.7.0",
        "vite": "^4.4.8",
        "vite-plugin-svgr": "^3.2.0",
        "web-vitals": "^2.1.4"
    },
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "serve": "vite preview"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
           ]
        }
    }

index.js #

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { store, persistor } from "./store";
import { PersistGate } from "redux-persist/integration/react";
import { BrowserRouter } from "react-router-dom";

// meta.hot.accept is required for HMR update
// import.meta.hot.accept();

import "./index.css";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <React.StrictMode>
                <React.StrictMode>
                    <BrowserRouter basename="/">
                        <App />
                    </BrowserRouter>
                </React.StrictMode>
            </React.StrictMode>
        </PersistGate>
    </Provider>
 );

解决方案 #

1. 修复import.meta.hot.accept()的构建报错 #

import.meta.hot仅在Vite开发环境存在，生产构建时会被移除，直接调用会导致报错。需要先判断其是否存在：

if (import.meta.hot) {
  import.meta.hot.accept();
}

2. 排查HMR失效的根本原因 #

• 检查React插件配置：确保@vitejs/plugin-react的快速刷新功能启用，可在vite.config.js中明确配置：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react({ fastRefresh: true })],
  });
  

• 移除重复的React.StrictMode：代码中嵌套了两层<React.StrictMode>，虽不直接导致HMR问题，但可能引发异常行为，建议保留一层即可。
• 排查依赖冲突：jQuery、react-helmet等第三方库可能与Vite的HMR机制冲突，可临时移除这些库验证HMR是否恢复，再逐个排查。
• 清除缓存：删除node_modules和锁文件（package-lock.json/yarn.lock），重新安装依赖，再执行vite --force启动开发服务器清除Vite缓存。
• 拆分组件结构：入口文件（如index.js、App.js）的修改大概率会触发整页重载，建议将业务逻辑拆分为更小的子组件，修改子组件时HMR可正常工作。

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