storybook: [Bug]: Cannot read properties of undefined (reading 'fonts') with `addon-docs`

Describe the bug

After upgrading from storybook v7 (7.0.21) to v7.3 (7.3.1) I am getting an error in the auto generated mdx pages from addon-docs:

Screenshot 2023-08-17 at 12 06 39
TypeError: Cannot read properties of undefined (reading 'fonts')
    at withReset (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-JOMQ2S25.js?v=8acb6a16:610:64)
    at handleInterpolation (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-Y5YD3UU7.js?v=8acb6a16:1353:47)
    at serializeStyles (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-Y5YD3UU7.js?v=8acb6a16:1419:78)
    at http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-Y5YD3UU7.js?v=8acb6a16:1635:24
    at http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-Y5YD3UU7.js?v=8acb6a16:1440:12
    at renderWithHooks (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-OMPOGDPS.js?v=8acb6a16:12171:26)
    at updateForwardRef (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-OMPOGDPS.js?v=8acb6a16:14327:28)
    at beginWork (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-OMPOGDPS.js?v=8acb6a16:15934:22)
    at beginWork$1 (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-OMPOGDPS.js?v=8acb6a16:19749:22)
    at performUnitOfWork (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-OMPOGDPS.js?v=8acb6a16:19194:20)
Screenshot 2023-08-17 at 12 07 17 Screenshot 2023-08-17 at 12 07 41

To Reproduce

The project is a standard storybook app with tailwind. These are the installed dependencies:

"@storybook/addon-essentials": "^7.3.1",
"@storybook/addon-interactions": "^7.3.1",
"@storybook/addon-links": "^7.3.1",
"@storybook/addon-styling": "^1.3.6",
"@storybook/blocks": "^7.3.1",
"@storybook/react": "^7.3.1",
"@storybook/react-vite": "^7.3.1",
"@vitejs/plugin-react": "^4.0.4",
"@vitest/ui": "^0.32.2",
"react": "^18.2.0",
"storybook": "^7.3.1",

main.ts:

import remarkGfm from "remark-gfm";

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    {
      name: "@storybook/addon-styling",
      options: {
        postCss: true,
      },
    },
    {
      name: "@storybook/addon-docs",
      options: {
        mdxPluginOptions: {
          mdxCompileOptions: {
            remarkPlugins: [remarkGfm],
          },
        },
      },
    },
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: true,
  },
};

export default config;

preview.ts:

import { withThemeByDataAttribute } from "@storybook/addon-styling";
import type { Preview } from "@storybook/react";

import "../src/theme/tailwind.css";

export const decorators = [
  // TailwindCSS dark mode toggle
  withThemeByDataAttribute({
    themes: {
      light: "light",
      dark: "dark",
    },
    defaultTheme: "light",
    attributeName: "data-mode",
  }),
];

const preview: Preview = {
  parameters: {
    parameters: { controls: { sort: "requiredFirst" } },
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

System

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Safari: 16.4
  npmPackages:
    @storybook/addon-essentials: ^7.3.1 => 7.3.1 
    @storybook/addon-interactions: ^7.3.1 => 7.3.1 
    @storybook/addon-links: ^7.3.1 => 7.3.1 
    @storybook/addon-styling: ^1.3.6 => 1.3.6 
    @storybook/blocks: ^7.3.1 => 7.3.1 
    @storybook/react: ^7.3.1 => 7.3.1 
    @storybook/react-vite: ^7.3.1 => 7.3.1 
    @storybook/testing-library: ^0.2.0 => 0.2.0

Additional context

Related

The app works without problem if autodocs is set to false (no mdx files). The app was also working correctly before upgrading to v7.3.1.

About this issue

  • Original URL
  • State: closed
  • Created 10 months ago
  • Reactions: 4
  • Comments: 16 (6 by maintainers)

Most upvoted comments

Have same issue for version 7.5.1 Workaround from @vanessayuenn post, and suggestions from https://github.com/storybookjs/storybook/issues/12016 didn’t work for me

I’m faced this after upgrading from 7.1.0 to current lastest version 7.3.2 by using command npx storybook@latest upgrade.

Same error with v7.3.2