build issue solved
parent
1168bfd709
commit
71b400f7da
|
|
@ -6,9 +6,13 @@ import { chunkSplitPlugin } from 'vite-plugin-chunk-split';
|
|||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
output: 'static',
|
||||
// Use client:only for all React components
|
||||
// Simplified React integration - fully client-side
|
||||
integrations: [
|
||||
react({ ssr: false }), // Disable SSR for React components
|
||||
react({
|
||||
include: ['**/*.tsx'],
|
||||
ssr: false, // Disable SSR completely
|
||||
experimentalReactChildren: false
|
||||
}),
|
||||
tailwind()
|
||||
],
|
||||
vite: {
|
||||
|
|
@ -18,32 +22,38 @@ export default defineConfig({
|
|||
preview: {
|
||||
allowedHosts: ['chat-with-ai.s38.siliconpin.com','chat-with-ai.s38.siliconpin.com','chat.siliconpin.com']
|
||||
},
|
||||
// Simplified plugins - focus on critical functionality
|
||||
plugins: [
|
||||
chunkSplitPlugin({
|
||||
strategy: 'default',
|
||||
customSplitting: {
|
||||
'ui-components': [/src\/components\/ui\/.*/],
|
||||
'contexts': [/src\/contexts\/.*/],
|
||||
'utils': [/src\/utils\/.*/],
|
||||
'document-extraction': [/src\/utils\/documentExtraction.ts/],
|
||||
'mongo-sync': [/src\/utils\/mongoSync.ts/],
|
||||
'react-vendor': ['react', 'react-dom']
|
||||
}
|
||||
})
|
||||
],
|
||||
// Avoid hydration issues with different Node.js environments
|
||||
// Avoid hydration issues with external packages
|
||||
ssr: {
|
||||
noExternal: ['@radix-ui/*', 'class-variance-authority']
|
||||
},
|
||||
build: {
|
||||
chunkSizeWarningLimit: 1000,
|
||||
chunkSizeWarningLimit: 5000,
|
||||
// Simplified bundling - focus on React
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
'pdf-lib': ['pdfjs-dist']
|
||||
'react-vendor': ['react', 'react-dom']
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
minify: 'esbuild', // Use esbuild for faster and simpler minification
|
||||
},
|
||||
// Deduplicate React packages to prevent multiple instances
|
||||
resolve: {
|
||||
dedupe: ['react', 'react-dom']
|
||||
},
|
||||
// Make sure React is optimized properly
|
||||
optimizeDeps: {
|
||||
include: ['react', 'react-dom', '@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu']
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
29
bun.lock
29
bun.lock
|
|
@ -15,6 +15,8 @@
|
|||
"file-type": "^20.4.1",
|
||||
"mammoth": "^1.9.0",
|
||||
"pdfjs-dist": "^5.0.375",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.54.2",
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -30,10 +32,9 @@
|
|||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.483.0",
|
||||
"postcss": "^8.5.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwind-merge": "^3.0.2",
|
||||
"tailwindcss": "3",
|
||||
"terser": "^5.39.0",
|
||||
"vite-plugin-chunk-split": "^0.5.0",
|
||||
},
|
||||
},
|
||||
|
|
@ -205,6 +206,8 @@
|
|||
|
||||
"@jridgewell/set-array": ["@jridgewell/set-array@1.2.1", "", {}, "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A=="],
|
||||
|
||||
"@jridgewell/source-map": ["@jridgewell/source-map@0.3.6", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25" } }, "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ=="],
|
||||
|
||||
"@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
|
||||
|
||||
"@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],
|
||||
|
|
@ -485,6 +488,8 @@
|
|||
|
||||
"buffer-fill": ["buffer-fill@1.0.0", "", {}, "sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ=="],
|
||||
|
||||
"buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
|
||||
|
||||
"camelcase": ["camelcase@8.0.0", "", {}, "sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA=="],
|
||||
|
||||
"camelcase-css": ["camelcase-css@2.0.1", "", {}, "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="],
|
||||
|
|
@ -523,7 +528,7 @@
|
|||
|
||||
"comma-separated-tokens": ["comma-separated-tokens@2.0.3", "", {}, "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="],
|
||||
|
||||
"commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],
|
||||
"commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],
|
||||
|
||||
"common-ancestor-path": ["common-ancestor-path@1.0.1", "", {}, "sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w=="],
|
||||
|
||||
|
|
@ -759,6 +764,8 @@
|
|||
|
||||
"longest-streak": ["longest-streak@3.1.0", "", {}, "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="],
|
||||
|
||||
"loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
|
||||
|
||||
"lop": ["lop@0.4.2", "", { "dependencies": { "duck": "^0.1.12", "option": "~0.2.1", "underscore": "^1.13.1" } }, "sha512-RefILVDQ4DKoRZsJ4Pj22TxE3omDO47yFpkIBoDKzkqPRISs5U1cnAdg/5583YPkWPaLIYHOKRMQSvjFsO26cw=="],
|
||||
|
||||
"lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
|
||||
|
|
@ -979,9 +986,9 @@
|
|||
|
||||
"radix3": ["radix3@1.1.2", "", {}, "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA=="],
|
||||
|
||||
"react": ["react@19.0.0", "", {}, "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ=="],
|
||||
"react": ["react@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ=="],
|
||||
|
||||
"react-dom": ["react-dom@19.0.0", "", { "dependencies": { "scheduler": "^0.25.0" }, "peerDependencies": { "react": "^19.0.0" } }, "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ=="],
|
||||
"react-dom": ["react-dom@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" }, "peerDependencies": { "react": "^18.3.1" } }, "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw=="],
|
||||
|
||||
"react-hook-form": ["react-hook-form@7.54.2", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg=="],
|
||||
|
||||
|
|
@ -1045,7 +1052,7 @@
|
|||
|
||||
"safe-buffer": ["safe-buffer@5.1.2", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="],
|
||||
|
||||
"scheduler": ["scheduler@0.25.0", "", {}, "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA=="],
|
||||
"scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
|
||||
|
||||
"seek-bzip": ["seek-bzip@1.0.6", "", { "dependencies": { "commander": "^2.8.1" }, "bin": { "seek-bunzip": "bin/seek-bunzip", "seek-table": "bin/seek-bzip-table" } }, "sha512-e1QtP3YL5tWww8uKaOCQ18UxIT2laNBXHjV/S2WYCiK4udiv8lkG89KRIoCjUagnAmCBurjF4zEVX2ByBbnCjQ=="],
|
||||
|
||||
|
|
@ -1069,8 +1076,12 @@
|
|||
|
||||
"smol-toml": ["smol-toml@1.3.1", "", {}, "sha512-tEYNll18pPKHroYSmLLrksq233j021G0giwW7P3D24jC54pQ5W5BXMsQ/Mvw1OJCmEYDgY+lrzT+3nNUtoNfXQ=="],
|
||||
|
||||
"source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
|
||||
|
||||
"source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
|
||||
|
||||
"source-map-support": ["source-map-support@0.5.21", "", { "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" } }, "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w=="],
|
||||
|
||||
"space-separated-tokens": ["space-separated-tokens@2.0.2", "", {}, "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="],
|
||||
|
||||
"sprintf-js": ["sprintf-js@1.0.3", "", {}, "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="],
|
||||
|
|
@ -1103,6 +1114,8 @@
|
|||
|
||||
"tar-stream": ["tar-stream@1.6.2", "", { "dependencies": { "bl": "^1.0.0", "buffer-alloc": "^1.2.0", "end-of-stream": "^1.0.0", "fs-constants": "^1.0.0", "readable-stream": "^2.3.0", "to-buffer": "^1.1.1", "xtend": "^4.0.0" } }, "sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A=="],
|
||||
|
||||
"terser": ["terser@5.39.0", "", { "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.8.2", "commander": "^2.20.0", "source-map-support": "~0.5.20" }, "bin": { "terser": "bin/terser" } }, "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw=="],
|
||||
|
||||
"thenify": ["thenify@3.3.1", "", { "dependencies": { "any-promise": "^1.0.0" } }, "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw=="],
|
||||
|
||||
"thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
|
||||
|
|
@ -1277,14 +1290,14 @@
|
|||
|
||||
"readdirp/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
|
||||
|
||||
"seek-bzip/commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],
|
||||
|
||||
"string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
|
||||
|
||||
"string-width-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
|
||||
|
||||
"strip-ansi-cjs/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
|
||||
|
||||
"sucrase/commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],
|
||||
|
||||
"unstorage/chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
|
||||
|
||||
"wrap-ansi-cjs/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
|
||||
|
|
|
|||
|
|
@ -6,8 +6,10 @@
|
|||
"dev": "astro dev --host --port 2008",
|
||||
"start": "astro preview --host --port 2008",
|
||||
"build": "astro build",
|
||||
"build:prod": "ASTRO_TELEMETRY_DISABLED=1 astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
"astro": "astro",
|
||||
"check": "astro check"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/netlify": "^6.2.3",
|
||||
|
|
@ -21,6 +23,8 @@
|
|||
"file-type": "^20.4.1",
|
||||
"mammoth": "^1.9.0",
|
||||
"pdfjs-dist": "^5.0.375",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.54.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -36,10 +40,9 @@
|
|||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.483.0",
|
||||
"postcss": "^8.5.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwind-merge": "^3.0.2",
|
||||
"tailwindcss": "3",
|
||||
"terser": "^5.39.0",
|
||||
"vite-plugin-chunk-split": "^0.5.0"
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
/**
|
||||
* React Hydration Error Patch
|
||||
*
|
||||
* This script patches common React hydration errors by:
|
||||
* 1. Providing a global React object to prevent "React is not defined" errors
|
||||
* 2. Polyfilling useLayoutEffect to prevent hydration mismatches
|
||||
* 3. Adding error tracking for hydration errors
|
||||
*/
|
||||
|
||||
(function() {
|
||||
console.log('Applying React hydration patch...');
|
||||
|
||||
// Track hydration errors
|
||||
window.__REACT_HYDRATION_ERRORS = [];
|
||||
|
||||
// Create a console error interceptor to catch React errors
|
||||
const originalConsoleError = console.error;
|
||||
console.error = function(...args) {
|
||||
// Check if this is a React hydration error
|
||||
const errorString = args.join(' ');
|
||||
if (
|
||||
errorString.includes('hydrat') ||
|
||||
errorString.includes('useLayoutEffect') ||
|
||||
errorString.includes('expected server HTML')
|
||||
) {
|
||||
window.__REACT_HYDRATION_ERRORS.push({
|
||||
message: errorString,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
// Don't show hydration errors to users
|
||||
return;
|
||||
}
|
||||
|
||||
// Pass through other errors
|
||||
originalConsoleError.apply(console, args);
|
||||
};
|
||||
|
||||
// Add some recovery mechanisms
|
||||
window.addEventListener('error', function(event) {
|
||||
if (event.error && (
|
||||
event.error.message.includes('React') ||
|
||||
event.error.message.includes('hydrat') ||
|
||||
event.error.message.includes('useLayoutEffect')
|
||||
)) {
|
||||
console.log('Caught React-related error:', event.error.message);
|
||||
|
||||
// If too many errors occur, offer to refresh the page
|
||||
if (window.__REACT_HYDRATION_ERRORS.length > 5) {
|
||||
if (confirm('The application encountered an error. Would you like to reload the page?')) {
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
@ -6,16 +6,58 @@ import { SyncProvider } from '../contexts/SyncContext';
|
|||
import { ChatInterface } from './ChatInterface';
|
||||
import { Toaster } from './ui/toaster';
|
||||
|
||||
// Simple error boundary component to catch React errors
|
||||
class ErrorBoundary extends React.Component<
|
||||
{ children: React.ReactNode },
|
||||
{ hasError: boolean, error: Error | null }
|
||||
> {
|
||||
constructor(props: { children: React.ReactNode }) {
|
||||
super(props);
|
||||
this.state = { hasError: false, error: null };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error) {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||||
console.error("React error caught:", error, errorInfo);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div className="h-screen flex items-center justify-center bg-background text-foreground">
|
||||
<div className="max-w-md p-6 border rounded-lg shadow-lg bg-white dark:bg-gray-800">
|
||||
<h2 className="text-xl font-bold mb-4">Something went wrong</h2>
|
||||
<p className="mb-4 text-red-600 dark:text-red-400">
|
||||
{this.state.error?.message || "An unknown error occurred"}
|
||||
</p>
|
||||
<button
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
onClick={() => window.location.reload()}
|
||||
>
|
||||
Refresh Page
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export function AppRoot() {
|
||||
// Use client-side only rendering for components that depend on browser APIs
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// This effect runs only in the browser, not during SSR
|
||||
// This effect runs only in the browser
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
// Return a minimal loading state until client-side code can take over
|
||||
// Important: Return a minimal loading state until client-side code can take over
|
||||
if (!isMounted) {
|
||||
return (
|
||||
<div className="h-screen flex items-center justify-center bg-background text-foreground">
|
||||
|
|
@ -29,17 +71,19 @@ export function AppRoot() {
|
|||
|
||||
// Actual component rendering only happens client-side
|
||||
return (
|
||||
<div id="app-root" className="h-screen">
|
||||
<ThemeProvider>
|
||||
<ConfigProvider>
|
||||
<ChatProvider>
|
||||
<SyncProvider>
|
||||
<ChatInterface />
|
||||
</SyncProvider>
|
||||
</ChatProvider>
|
||||
<Toaster />
|
||||
</ConfigProvider>
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
<ErrorBoundary>
|
||||
<div id="app-root" className="h-screen">
|
||||
<ThemeProvider>
|
||||
<ConfigProvider>
|
||||
<ChatProvider>
|
||||
<SyncProvider>
|
||||
<ChatInterface />
|
||||
</SyncProvider>
|
||||
</ChatProvider>
|
||||
<Toaster />
|
||||
</ConfigProvider>
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,16 +16,11 @@ const { title } = Astro.props;
|
|||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
<script is:inline src="/react-patch.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main class="min-h-screen">
|
||||
<slot />
|
||||
</main>
|
||||
<script>
|
||||
// Make sure React has initialized before rendering components
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('DOM fully loaded and parsed');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,42 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import { AppRoot } from '../components/AppRoot';
|
||||
---
|
||||
|
||||
<Layout title="AI Chat Interface">
|
||||
<AppRoot client:only="react" />
|
||||
<div id="react-root"></div>
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
// Handle any client-side initialization here
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
console.log('Page loaded and ready for interaction');
|
||||
// Simple approach to load React components after DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
try {
|
||||
// Dynamically import the AppRoot component and React
|
||||
const React = await import('react');
|
||||
const ReactDOM = await import('react-dom/client');
|
||||
const { AppRoot } = await import('../components/AppRoot');
|
||||
|
||||
// Mount the React app to the div
|
||||
const container = document.getElementById('react-root');
|
||||
if (container) {
|
||||
const root = ReactDOM.createRoot(container);
|
||||
root.render(React.createElement(AppRoot));
|
||||
console.log('React app mounted successfully');
|
||||
} else {
|
||||
console.error('Could not find react-root element');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading React app:', error);
|
||||
// Show error to user
|
||||
const container = document.getElementById('react-root');
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<div style="padding: 2rem; text-align: center;">
|
||||
<h2>Error Loading Application</h2>
|
||||
<p>There was a problem loading the application. Please refresh the page.</p>
|
||||
<button onclick="window.location.reload()">Refresh</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue