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.
52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import React, { useState, useCallback } from 'react';
|
|
import { I18nContext, I18nContextType } from '../context/i18n';
|
|
|
|
interface I18nProviderProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
// Basic translations (replace with a proper i18n library later)
|
|
const translations: Record<string, Record<string, string>> = {
|
|
en: {
|
|
greeting: 'Hello',
|
|
welcome: 'Welcome to our application!',
|
|
'Loading repositories...': 'Loading repositories...',
|
|
'This may take a moment': 'This may take a moment',
|
|
'No repositories found': 'No repositories found',
|
|
'Connect your GitHub account or create a new repository to get started': 'Connect your GitHub account or create a new repository to get started',
|
|
'Connect GitHub Account': 'Connect GitHub Account',
|
|
'Try searching with different keywords or filters': 'Try searching with different keywords or filters',
|
|
},
|
|
es: {
|
|
greeting: 'Hola',
|
|
welcome: '¡Bienvenido a nuestra aplicación!',
|
|
'Loading repositories...': 'Cargando repositorios...',
|
|
'This may take a moment': 'Esto puede tomar un momento',
|
|
'No repositories found': 'No se encontraron repositorios',
|
|
'Connect your GitHub account or create a new repository to get started': 'Conecta tu cuenta de GitHub o crea un nuevo repositorio para comenzar',
|
|
'Connect GitHub Account': 'Conectar cuenta de GitHub',
|
|
'Try searching with different keywords or filters': 'Intenta buscar con diferentes palabras clave o filtros',
|
|
},
|
|
};
|
|
|
|
export const I18nProvider: React.FC<I18nProviderProps> = ({ children }) => {
|
|
const [locale, setLocale] = useState<string>('en');
|
|
|
|
const t = useCallback(
|
|
(key: string): string => {
|
|
return translations[locale]?.[key] || key;
|
|
},
|
|
[locale]
|
|
);
|
|
|
|
const contextValue: I18nContextType = {
|
|
locale,
|
|
setLocale,
|
|
t,
|
|
};
|
|
|
|
return (
|
|
<I18nContext.Provider value={contextValue}>{children}</I18nContext.Provider>
|
|
);
|
|
};
|