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

colmukrainec · 2024-03-12T23:39:50Z

colmukrainec
Mar 12, 2024

Summary

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

Additional information

main.ts:

import type { StorybookConfig } from "@storybook/nextjs";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  staticDirs: ["..\\public"],
};
export default config;

Note: This was untouched as it was autogenerated.

Create a reproduction

No response

valentinpalkovic · 2024-03-14T21:10:11Z

valentinpalkovic
Mar 14, 2024
Maintainer

Hi @colmukrainec

My wild guess is that you are on a Windows machine. I can't reproduce the error even after following the reproduction steps.

Does the error also occur if Storybook runs in Babel mode? To try this out, please create a .babelrc in the root of your project with the following content:

{
  "presets": ["next/babel"]
}

Next week, I have a Windows machine available, and then I will give it another try to reproduce the issue.

4 replies

davidlhw Mar 30, 2024

Thanks @valentinpalkovic.

This bug is reproducible on a Windows machine for me and your suggestion solves it.

Any idea what might be the cause of this weird issue?

valentinpalkovic Mar 30, 2024
Maintainer

It seems we have a bug when Storybook runs in SWC mode. That was the reason to ask for a reproduction when running in Babel mode. Could the downvoters of my answer please respond, what the downvote should mean? Does it mean you don't want to run in Babel mode (that was also not the intention of the message. I just wanted to eliminate a theory) or wasn't it reproducible in Babel mode?

davidlhw Mar 30, 2024

Thanks for the reply.

It seems like this solution only addresses the symptom of the issue with SWC mode and not the underlying root cause.

FWIW, my build failed after configuring to run in this custom babel mode. Seems like next/font has conflicts with custom babel configs.

valentinpalkovic Mar 31, 2024
Maintainer

That's correct. I try to take a look of fixing the issue in SWC mode next week!

valentinpalkovic · 2024-03-31T19:58:48Z

valentinpalkovic
Mar 31, 2024
Maintainer

I have identified the root cause and I am working on a fix. Please continue the discussion in the following issue if necessary: #26699

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

Replies: 2 comments 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

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

colmukrainec Mar 12, 2024

Summary

Additional information

Create a reproduction

Replies: 2 comments · 4 replies

valentinpalkovic Mar 14, 2024 Maintainer

davidlhw Mar 30, 2024

valentinpalkovic Mar 30, 2024 Maintainer

davidlhw Mar 30, 2024

valentinpalkovic Mar 31, 2024 Maintainer

valentinpalkovic Mar 31, 2024 Maintainer

colmukrainec
Mar 12, 2024

Replies: 2 comments 4 replies

valentinpalkovic
Mar 14, 2024
Maintainer

valentinpalkovic Mar 30, 2024
Maintainer

valentinpalkovic Mar 31, 2024
Maintainer

valentinpalkovic
Mar 31, 2024
Maintainer