使用next/font/google渲染Storybook预览时触发TypeError错误

导入next/font/google字体后，在Storybook中触发以下错误：TypeError: Cannot read properties of undefined (reading 'className')。我已尝试所有能找到的解决方案，包括：

• 重新安装Storybook
• 在新项目中复现问题
• 使用.variable替代.className
• 升级至Storybook 8
• 将enhanced-resolve从5.11版本降级到5.10
• 本地导入字体
• 在preview.tsx中直接导入next/fonts/google的字体

文件结构 #

├── .storybook
│   ├── main.ts
│   ├── preview.tsx
├── src
│   ├── app
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   ├── globals.css
│   ├── lib
│   │   ├── fonts.ts
│   ├── components
│   │   ├── Button
│   │   │   ├── Button.tsx
│   │   │   ├── Button.css
│   │   │   ├── Button.stories.ts
├── package.json
├── package-lock.json
├── tsconfig.json
└── tailwind.config.js

注：我还尝试了运行npx storybook@latest init自动生成的默认stories文件夹及文件。

复现步骤 #

1. 运行npx create-next-app@latest
   • 除了自定义别名（最后一个提示）外，其余选项均选Yes
2. 运行npx storybook@latest init
3. 创建目录及文件./src/lib/font.ts
4. 向./src/lib/font.ts添加以下代码：

import { Quando } from 'next/font/google'

export const quando = Quando({
  weight: '400',
  subsets: ['latin'],
  variable: '--font-quando',
})

5. 修改src/app/layout.tsx如下：

import type { Metadata } from "next";
import "./globals.css";
import { quando } from "@/lib/fonts";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={quando.className}>{children}</body>
    </html>
  );
}

6. 运行npm run dev启动Next.js应用
   • 正常显示默认页面且Quando字体加载正常
7. 修改.storybook/preview.ts如下：

import type { Preview } from "@storybook/react";
import { quando } from "../src/lib/fonts";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: [
    Story => (
      <main className={quando.className}>
        <Story />
      </main>
    ),
  ],
};

export default preview;

8. 将preview.ts重命名为preview.tsx以修复部分错误
9. 终止Storybook进程并运行npm run storybook
10. 每个组件均出现如下错误：

TypeError
Cannot read properties of undefined (reading 'className')
Call Stack
 preview.decorators
  main.iframe.bundle.js:51:79
 hookified
  runtime.js:84:10607
 undefined
  runtime.js:100:3256
 undefined
  runtime.js:100:3717
 withOutline
  vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-bc4dd4.iframe.bundle.js:2986:620
 hookified
  runtime.js:84:10607
 undefined
  runtime.js:100:3256
 undefined
  runtime.js:100:3717
 withMeasure
  vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-bc4dd4.iframe.bundle.js:2563:14020
 hookified
  runtime.js:84:10607

内容的提问来源于stack exchange，提问作者Colm Ukrainec