mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-05-31 10:14:15 +00:00
fix(frontend): reload page on Vite chunk preload error after upgrade
After a panel upgrade the embedded dist/ ships with new hashed chunk filenames, so SPA tabs loaded before the upgrade hold references to chunks that no longer exist on the server and lazy modals 404. Hook `vite:preloadError` and force one full reload (guarded by a session flag) so the browser picks up the new index.html.
This commit is contained in:
parent
2ed85aadda
commit
bf0754d21e
10 changed files with 26 additions and 0 deletions
|
|
@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client';
|
||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
import 'antd/dist/reset.css';
|
import 'antd/dist/reset.css';
|
||||||
|
|
||||||
|
import '@/utils/chunkReload';
|
||||||
import { setupAxios } from '@/api/axios-init.js';
|
import { setupAxios } from '@/api/axios-init.js';
|
||||||
import { applyDocumentTitle } from '@/utils';
|
import { applyDocumentTitle } from '@/utils';
|
||||||
import { readyI18n } from '@/i18n/react';
|
import { readyI18n } from '@/i18n/react';
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client';
|
||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
import 'antd/dist/reset.css';
|
import 'antd/dist/reset.css';
|
||||||
|
|
||||||
|
import '@/utils/chunkReload';
|
||||||
import { setupAxios } from '@/api/axios-init.js';
|
import { setupAxios } from '@/api/axios-init.js';
|
||||||
import { applyDocumentTitle } from '@/utils';
|
import { applyDocumentTitle } from '@/utils';
|
||||||
import { readyI18n } from '@/i18n/react';
|
import { readyI18n } from '@/i18n/react';
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client';
|
||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
import 'antd/dist/reset.css';
|
import 'antd/dist/reset.css';
|
||||||
|
|
||||||
|
import '@/utils/chunkReload';
|
||||||
import { setupAxios } from '@/api/axios-init.js';
|
import { setupAxios } from '@/api/axios-init.js';
|
||||||
import { applyDocumentTitle } from '@/utils';
|
import { applyDocumentTitle } from '@/utils';
|
||||||
import { readyI18n } from '@/i18n/react';
|
import { readyI18n } from '@/i18n/react';
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client';
|
||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
import 'antd/dist/reset.css';
|
import 'antd/dist/reset.css';
|
||||||
|
|
||||||
|
import '@/utils/chunkReload';
|
||||||
import { setupAxios } from '@/api/axios-init.js';
|
import { setupAxios } from '@/api/axios-init.js';
|
||||||
import { applyDocumentTitle } from '@/utils';
|
import { applyDocumentTitle } from '@/utils';
|
||||||
import { readyI18n } from '@/i18n/react';
|
import { readyI18n } from '@/i18n/react';
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client';
|
||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
import 'antd/dist/reset.css';
|
import 'antd/dist/reset.css';
|
||||||
|
|
||||||
|
import '@/utils/chunkReload';
|
||||||
import { setupAxios } from '@/api/axios-init.js';
|
import { setupAxios } from '@/api/axios-init.js';
|
||||||
import { applyDocumentTitle } from '@/utils';
|
import { applyDocumentTitle } from '@/utils';
|
||||||
import { readyI18n } from '@/i18n/react';
|
import { readyI18n } from '@/i18n/react';
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client';
|
||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
import 'antd/dist/reset.css';
|
import 'antd/dist/reset.css';
|
||||||
|
|
||||||
|
import '@/utils/chunkReload';
|
||||||
import { setupAxios } from '@/api/axios-init.js';
|
import { setupAxios } from '@/api/axios-init.js';
|
||||||
import { applyDocumentTitle } from '@/utils';
|
import { applyDocumentTitle } from '@/utils';
|
||||||
import { readyI18n } from '@/i18n/react';
|
import { readyI18n } from '@/i18n/react';
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client';
|
||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
import 'antd/dist/reset.css';
|
import 'antd/dist/reset.css';
|
||||||
|
|
||||||
|
import '@/utils/chunkReload';
|
||||||
import { setupAxios } from '@/api/axios-init.js';
|
import { setupAxios } from '@/api/axios-init.js';
|
||||||
import { applyDocumentTitle } from '@/utils';
|
import { applyDocumentTitle } from '@/utils';
|
||||||
import { readyI18n } from '@/i18n/react';
|
import { readyI18n } from '@/i18n/react';
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client';
|
||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
import 'antd/dist/reset.css';
|
import 'antd/dist/reset.css';
|
||||||
|
|
||||||
|
import '@/utils/chunkReload';
|
||||||
import { readyI18n } from '@/i18n/react';
|
import { readyI18n } from '@/i18n/react';
|
||||||
import { ThemeProvider } from '@/hooks/useTheme';
|
import { ThemeProvider } from '@/hooks/useTheme';
|
||||||
import SubPage from '@/pages/sub/SubPage';
|
import SubPage from '@/pages/sub/SubPage';
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client';
|
||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
import 'antd/dist/reset.css';
|
import 'antd/dist/reset.css';
|
||||||
|
|
||||||
|
import '@/utils/chunkReload';
|
||||||
import { setupAxios } from '@/api/axios-init.js';
|
import { setupAxios } from '@/api/axios-init.js';
|
||||||
import { applyDocumentTitle } from '@/utils';
|
import { applyDocumentTitle } from '@/utils';
|
||||||
import { readyI18n } from '@/i18n/react';
|
import { readyI18n } from '@/i18n/react';
|
||||||
|
|
|
||||||
17
frontend/src/utils/chunkReload.ts
Normal file
17
frontend/src/utils/chunkReload.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
// After a panel upgrade the embedded dist/ ships with new hashed chunk
|
||||||
|
// filenames, so an SPA that was loaded before the upgrade still holds
|
||||||
|
// references to chunks that no longer exist on the server. The first
|
||||||
|
// time a lazy import 404s we force a full reload so the browser picks
|
||||||
|
// up the new index.html and its new chunk references.
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const RELOAD_FLAG = '__xuiChunkReloadOnce';
|
||||||
|
window.addEventListener('vite:preloadError', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
if (sessionStorage.getItem(RELOAD_FLAG) === '1') return;
|
||||||
|
sessionStorage.setItem(RELOAD_FLAG, '1');
|
||||||
|
window.location.reload();
|
||||||
|
});
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
sessionStorage.removeItem(RELOAD_FLAG);
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue