On the newer version of vite, it was causing full page reload even on all the changes, wheather i change a text or remove a heading tag. Adding import.meta.hot.accept() in my index.js file fixed the issue but it caused the build to fail causing the error:
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
On every change the vite compiler says Full page reload, instead of doing a HMR update. On previous version of vite 3.0.*, i was not getting full page reload and HMR update was working fine, after updating to the latest version I started encountering this full page reload, making the development experience slow and worse.
package.json file
{
"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>
);
Add the following condition in your index.js file.
if (import.meta.hot) {
import.meta.hot.accept();
}