Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
valentinpalkovic opened this issue Mar 31, 2024 Discussed in #26462 · 0 comments · Fixed by #26700
Closed

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

valentinpalkovic opened this issue Mar 31, 2024 Discussed in #26462 · 0 comments · Fixed by #26700
Assignees
@valentinpalkovic
Labels
bug nextjs windows

Comments

@valentinpalkovic
Copy link
Contributor

Discussed in #26462

Originally posted by colmukrainec March 13, 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:

  1. Run npx create-next-app@latest
    • Choose Yes for every question expect the custom aliasing (the last prompt)
  2. Run npx storybook@latest init
  3. Make directory and file ./src/lib/font.ts
  4. 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',
})
  1. 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>
  );
}
  1. Run npm run dev the next web app
    • Should see the default next page with the Quando font properly loaded
  2. 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;
  1. Rename preview.ts to preview.tsx to fix the errors
  2. Terminate the storybook process and run npm run storybook
  3. 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@valentinpalkovic valentinpalkovic

Labels
bug nextjs windows
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Next.js: Fix next/font usage on Windows machines storybookjs/storybook
1 participant
@valentinpalkovic