mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-06-23 02:16:08 +00:00
25ce3a682c
It seems minified React errors #418 and #423 were popping up, which pointed to problems with React Context and hook calls, most likely during the server-side rendering process. Here's what I found during my investigation: - The DndProvider and its potential consumer DraggableTabList weren't the culprits, as DraggableTabList doesn't seem to be in use. - RepositoryDialogContext was being provided and consumed correctly. - The main issue was located in `app/routes/_index.tsx`. The `BaseChat` component was being used as the `fallback` prop for the `ClientOnly` higher-order component. - `BaseChat` makes use of `StickToBottomContext` and associated hooks. These aren't fully designed for server-side rendering or are meant to run on the client-side. Rendering `BaseChat` on the server as a fallback was causing these hooks to execute in an environment they weren't prepared for. Here are the changes I made: - I created a new, lightweight placeholder component: `app/components/chat/ChatSkeleton.tsx`. This component offers a static visual representation of the chat interface without relying on any client-specific hooks or complex logic. - I updated `app/routes/_index.tsx` to use `ChatSkeleton` as the `fallback` for the `ClientOnly` component, instead of `BaseChat`. This approach ensures that only a simple, server-side rendering-safe component is rendered on the server for this part of the component tree. This defers the execution of `BaseChat` and its client-side hooks until the client rendering phase.
106 lines
2.9 KiB
TypeScript
106 lines
2.9 KiB
TypeScript
import { useStore } from '@nanostores/react';
|
|
import type { LinksFunction } from '@remix-run/cloudflare';
|
|
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
|
|
import { I18nProvider } from './components/I18nProvider';
|
|
import { LanguageSelector } from './components/LanguageSelector';
|
|
import tailwindReset from '@unocss/reset/tailwind-compat.css?url';
|
|
import { themeStore } from './lib/stores/theme';
|
|
import { stripIndents } from './utils/stripIndent';
|
|
import { createHead } from 'remix-island';
|
|
import { useEffect } from 'react';
|
|
import { DndProvider } from 'react-dnd';
|
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
import { ClientOnly } from 'remix-utils/client-only';
|
|
|
|
import reactToastifyStyles from 'react-toastify/dist/ReactToastify.css?url';
|
|
import globalStyles from './styles/index.scss?url';
|
|
import xtermStyles from '@xterm/xterm/css/xterm.css?url';
|
|
|
|
import 'virtual:uno.css';
|
|
|
|
export const links: LinksFunction = () => [
|
|
{
|
|
rel: 'icon',
|
|
href: '/favicon.svg',
|
|
type: 'image/svg+xml',
|
|
},
|
|
{ rel: 'stylesheet', href: reactToastifyStyles },
|
|
{ rel: 'stylesheet', href: tailwindReset },
|
|
{ rel: 'stylesheet', href: globalStyles },
|
|
{ rel: 'stylesheet', href: xtermStyles },
|
|
{
|
|
rel: 'preconnect',
|
|
href: 'https://fonts.googleapis.com',
|
|
},
|
|
{
|
|
rel: 'preconnect',
|
|
href: 'https://fonts.gstatic.com',
|
|
crossOrigin: 'anonymous',
|
|
},
|
|
{
|
|
rel: 'stylesheet',
|
|
href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
|
|
},
|
|
];
|
|
|
|
const inlineThemeCode = stripIndents`
|
|
setTutorialKitTheme();
|
|
|
|
function setTutorialKitTheme() {
|
|
let theme = localStorage.getItem('bolt_theme');
|
|
|
|
if (!theme) {
|
|
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
document.querySelector('html')?.setAttribute('data-theme', theme);
|
|
}
|
|
`;
|
|
|
|
export const Head = createHead(() => (
|
|
<>
|
|
<meta charSet="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<Meta />
|
|
<Links />
|
|
<script dangerouslySetInnerHTML={{ __html: inlineThemeCode }} />
|
|
</>
|
|
));
|
|
|
|
export function Layout({ children }: { children: React.ReactNode }) {
|
|
const theme = useStore(themeStore);
|
|
|
|
useEffect(() => {
|
|
document.querySelector('html')?.setAttribute('data-theme', theme);
|
|
}, [theme]);
|
|
|
|
return (
|
|
<>
|
|
<ClientOnly>{() => <DndProvider backend={HTML5Backend}>{children}</DndProvider>}</ClientOnly>
|
|
<ScrollRestoration />
|
|
<Scripts />
|
|
</>
|
|
);
|
|
}
|
|
|
|
import { logStore } from './lib/stores/logs';
|
|
|
|
export default function App() {
|
|
const theme = useStore(themeStore);
|
|
|
|
useEffect(() => {
|
|
logStore.logSystem('Application initialized', {
|
|
theme,
|
|
platform: navigator.platform,
|
|
userAgent: navigator.userAgent,
|
|
timestamp: new Date().toISOString(),
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<Layout>
|
|
<Outlet />
|
|
</Layout>
|
|
);
|
|
}
|