From a2e03b811e581674603617a4b13d9d25760c44be Mon Sep 17 00:00:00 2001
From: wangxiaolei <fatelei@gmail.com>
Date: Sat, 10 Jan 2026 19:49:23 +0800
Subject: [PATCH] fix: Broken import in .storybook/preview.tsx (#30812)

---
 web/.storybook/preview.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/.storybook/preview.tsx b/web/.storybook/preview.tsx
index 37c636cc75..5b38424776 100644
--- a/web/.storybook/preview.tsx
+++ b/web/.storybook/preview.tsx
@@ -1,8 +1,10 @@
 import type { Preview } from '@storybook/react'
+import type { Resource } from 'i18next'
 import { withThemeByDataAttribute } from '@storybook/addon-themes'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ToastProvider } from '../app/components/base/toast'
-import I18N from '../app/components/i18n'
+import { I18nClientProvider as I18N } from '../app/components/provider/i18n'
+import commonEnUS from '../i18n/en-US/common.json'
 
 import '../app/styles/globals.css'
 import '../app/styles/markdown.scss'
@@ -16,6 +18,14 @@ const queryClient = new QueryClient({
   },
 })
 
+const storyResources: Resource = {
+  'en-US': {
+    // Preload the most common namespace to avoid missing keys during initial render;
+    // other namespaces will be loaded on demand via resourcesToBackend.
+    common: commonEnUS as unknown as Record<string, unknown>,
+  },
+}
+
 export const decorators = [
   withThemeByDataAttribute({
     themes: {
@@ -28,7 +38,7 @@ export const decorators = [
   (Story) => {
     return (
       <QueryClientProvider client={queryClient}>
-        <I18N locale="en-US">
+        <I18N locale="en-US" resource={storyResources}>
           <ToastProvider>
             <Story />
           </ToastProvider>