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
:
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)
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
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)
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 meI’m faced this after upgrading from
7.1.0
to current lastest version7.3.2
by using commandnpx storybook@latest upgrade
.Same error with
v7.3.2