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.
30 lines
1.3 KiB
TypeScript
30 lines
1.3 KiB
TypeScript
import { json, type MetaFunction } from '@remix-run/cloudflare';
|
|
import { ClientOnly } from 'remix-utils/client-only';
|
|
import { BaseChat } from '~/components/chat/BaseChat'; // Keep BaseChat import if Chat.client still needs it, or remove if ChatSkeleton replaces all BaseChat SSR usage
|
|
import { Chat } from '~/components/chat/Chat.client';
|
|
import { Header } from '~/components/header/Header';
|
|
import BackgroundRays from '~/components/ui/BackgroundRays';
|
|
import { ChatSkeleton } from '~/components/chat/ChatSkeleton'; // Import the new skeleton
|
|
|
|
export const meta: MetaFunction = () => {
|
|
return [{ title: 'Bolt' }, { name: 'description', content: 'Talk with Bolt, an AI assistant from StackBlitz' }];
|
|
};
|
|
|
|
export const loader = () => json({});
|
|
|
|
/**
|
|
* Landing page component for Bolt
|
|
* Note: Settings functionality should ONLY be accessed through the sidebar menu.
|
|
* Do not add settings button/panel to this landing page as it was intentionally removed
|
|
* to keep the UI clean and consistent with the design system.
|
|
*/
|
|
export default function Index() {
|
|
return (
|
|
<div className="flex flex-col h-full w-full bg-bolt-elements-background-depth-1">
|
|
<BackgroundRays />
|
|
<Header />
|
|
<ClientOnly fallback={<ChatSkeleton />}>{() => <Chat />}</ClientOnly>
|
|
</div>
|
|
);
|
|
}
|