google when rendering storybook preview causes TypeError Cannot read properties of undefined (reading 'className')

83 Views Asked by Colm Ukrainec At 11 March 2024 at 23:16

The next/font/google imported font is causing TypeError Cannot read properties of undefined (reading 'className') on Storybook. I have searched and tried everything I could find including:

Reinstalling Storybook
Reproducing in a new project
Using .variable instead of .className
Upgrading to Storybook 8
Overriding enhanced-resolve to version 5.10 from 5.11
Importing the font locally
Importing the font from next/fonts/google directly in preview.tsx

File structure:

├── .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

Note: Additionally I tried the default stories folder and files that are made automatically by running npx storybook@latest init

To reproduce:

Run npx create-next-app@latest
- Choose Yes for every question expect the custom aliasing (the last prompt)
Run npx storybook@latest init
Make directory and file ./src/lib/font.ts
Add the following code to ./src/lib/font.ts:

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

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

The src/app/layout.tsx should be edited to appear as:

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>
  );
}

Run npm run dev the next web app
- Should see the default next page with the Quando font properly loaded
The .storybook/preview.ts file should be edited to appear as:

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;

Rename preview.ts to preview.tsx to fix the errors
Terminate the storybook process and run npm run storybook
Get an error on every component that appears as:

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

Original Q&A

Using next/font/google when rendering storybook preview causes TypeError Cannot read properties of undefined (reading 'className')

There are 0 best solutions below

Related Questions in TYPESCRIPT

Related Questions in NEXT.JS

Related Questions in STORYBOOK

Trending Questions

Popular # Hahtags

Popular Questions