[Bug]: Docs with react-vite doesn't work on 7.0.4 - Cannot read properties of undefined (reading 'fonts')

harkor commented 1 year ago

Describe the bug

Storybook render this error on docs page on a new storybook

Cannot read properties of undefined (reading 'fonts')

If I downgrade to 7.0.3, docs page working

To Reproduce

yarn dlx storybook@latest init --builder=vite --type=react yarn storybook

or yarn dlx storybook@next sandbox choose React Vite (TS) yarn install yarn storybook

System

Environment Info:

  System:
    OS: Linux 6.1 Manjaro Linux
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
  Binaries:
    Node: 19.8.1 - /tmp/xfs-72c84e66/node
    Yarn: 3.2.0 - /tmp/xfs-72c84e66/yarn
    npm: 8.19.2 - /usr/bin/npm
  Browsers:
    Firefox: 111.0.1

Additional context

The problem is only on 7.0.4

7.0.3 => OK 7.1.0-apha.3 => OK

shilman commented 1 year ago

I tried to reproduce this on my machine and the page rendered successfully. Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

hcvdhaar commented 1 year ago

For me this error occurs when importing a markdown file with a link or <a> into my .mdx file.


import ReadMe from './README.md?raw'; <<== markdown file with a link in it.

import { Markdown } from '@storybook/blocks';

<Markdown>{ReadMe}</Markdown>

harkor commented 1 year ago

On stackblitz, it's working fine... Since 7.0.5 it's fine.

mikeyamato commented 1 year ago

It may be coincidence but I started to experience this after upgrading to 7.0.11. It's funny (not actually 😢) because all my docs throw this error. Stories are fine.

I was adding an icon doc and following the example pretty much to a tee.

The following will throw the font error...

// Iconography.mdx

import { Meta, IconGallery, IconItem } from '@storybook/blocks';

import { Icon as IconExample } from './Icon';

<Meta title="Iconography" />

# Iconography

<IconGallery>
  <IconItem name="menu">
    <IconExample name="menu" />
  </IconItem>
</IconGallery>

But if I remove IconGallery and all it's children the error goes away and I'm able to render the page. Granted it only has the title.

import { Meta, IconGallery, IconItem } from '@storybook/blocks';

import { Icon as IconExample } from './Icon';

<Meta title="Iconography" />

# Iconography

My current setup:

"@storybook/addon-essentials": "^7.0.11",
"@storybook/addon-interactions": "^7.0.11",
"@storybook/addon-links": "^7.0.11",
 "@storybook/addon-mdx-gfm": "^7.0.11",
"@storybook/addon-styling": "^1.0.8",
"@storybook/blocks": "^7.0.11",
"@storybook/manager-api": "^7.0.11",
"@storybook/react": "^7.0.11",
"@storybook/react-vite": "^7.0.11",
"@storybook/testing-library": "^0.1.0",
"@storybook/theming": "^7.0.11",
"storybook": "^7.0.11",

mikeyamato commented 1 year ago

Follow up. I went ahead and deleted my node_modules because I thought there was something wrong with the cached data. Now I'm getting a different error.

Failed to fetch dynamically imported module: http://localhost:6006/src/components2/Icon/Iconography.mdx?t=1684013750297&import

Removing the block of code as I did above doesn't work any longer. But my stories are still working. I will investigate further.

tsdevelopment commented 1 year ago

I have the same error with 7.0.20. Is there any solution for that? I upgraded from 7.0.7 to 7.0.20.

adamburmister commented 1 year ago

Ditto; also seeing this after upgrading from 7.0.7 to 7.0.22

Stories continue to work
Docs all fail with an error of the same shape (usually "fonts", but I also have one failing with "secondary" (theme.secondary iirc))

Cannot read properties of undefined (reading 'fonts')
TypeError: Cannot read properties of undefined (reading 'fonts')
    at http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-XQ53KVDS.js?v=d242986e:616:111
    at handleInterpolation (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-LJJTG5GR.js?v=d242986e:1354:47)
    at serializeStyles (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-LJJTG5GR.js?v=d242986e:1420:78)
    at http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-LJJTG5GR.js?v=d242986e:1640:24
    at http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-LJJTG5GR.js?v=d242986e:1441:12
    at renderWithHooks (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-6ZDUWZXD.js?v=d242986e:12171:26)
    at updateForwardRef (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-6ZDUWZXD.js?v=d242986e:14327:28)
    at beginWork (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-6ZDUWZXD.js?v=d242986e:15934:22)
    at beginWork$1 (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-6ZDUWZXD.js?v=d242986e:19749:22)
    at performUnitOfWork (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-6ZDUWZXD.js?v=d242986e:19194:20)

   "devDependencies": {
     "@fontsource-variable/inter": "^5.0.3",
-    "@storybook/addon-essentials": "^7.0.7",
-    "@storybook/addon-interactions": "^7.0.7",
-    "@storybook/addon-links": "^7.0.7",
-    "@storybook/addon-styling": "^1.0.0-next.2",
-    "@storybook/blocks": "^7.0.7",
-    "@storybook/react": "^7.0.7",
-    "@storybook/react-vite": "^7.0.7",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/addon-essentials": "^7.0.22",
+    "@storybook/addon-interactions": "^7.0.22",
+    "@storybook/addon-links": "^7.0.22",
+    "@storybook/addon-styling": "^1.3.0",
+    "@storybook/blocks": "^7.0.22",
+    "@storybook/react": "^7.0.22",
+    "@storybook/react-vite": "^7.0.22",
+    "@storybook/testing-library": "^0.1.0",
     "@types/html-escaper": "^3.0.0",
-    "@types/jest": "^29.5.1",
+    "@types/jest": "^29.5.2",
     "@types/jsdom": "^21.1.1",
-    "@types/node": "^18.15.12",
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@types/node": "^20.3.1",
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
     "autoprefixer": "^10.4.14",
     "classnames": "^2.3.2",
     "copyfiles": "^2.4.1",
     "cssnano": "^6.0.1",
-    "eslint": "^8.38.0",
+    "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "^29.5.0",
-    "lint-staged": "^13.2.1",
+    "lint-staged": "^13.2.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.24",
-    "postcss-nesting": "^11.2.2",
+    "postcss-nesting": "^11.3.0",
     "postcss-preset-env": "^8.5.0",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.7",
-    "stylelint": "^15.5.0",
+    "storybook": "^7.0.22",
+    "stylelint": "^15.8.0",
     "stylelint-config-recommended": "^12.0.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.2",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.1"
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9"
   },

johot commented 1 year ago

I also have this bug in 7.0.24. I even tested it using a brand new storybook project from scratch.

Its very easy to reproduce:

Use react
Use vite

Put this in a story and it will crash

 <Markdown>`this wont work`</Markdown>

Not sure what can be done to fix this right now. I also tried the alpha version but could not get that one working either.

broksonic21 commented 1 year ago

We are seeing this for various versions, but it happens differently for everyone's machines/builds - for some, a given version works, for others it doesn't. Would love a resolution! vite related for sure.

millsb commented 1 year ago

This exact issue is also occurring for me with 7.0.26 -- Docs work okay until I use <ColorPalette> and then getting the undefined fonts error.

FlorianBurgevin commented 1 year ago

Got the same error in 7.0.26 with <ArgsTypes>component.

And similar error with <Stories>components (cannot read "size")

dgonzalezr commented 1 year ago

I just got the same issue while updating from v7.0.26 to v7.1.0. What worked for me was to remove the node_modules folder, the package-lock.json, and trigger again an npm install. It seems that for some dependencies the right version was not picked up.

jhohlfeld commented 1 year ago

Same here!

Solved just as @dgonzalezr wrote https://github.com/storybookjs/storybook/issues/22088#issuecomment-1644101555:

I just got the same issue while updating from v7.0.26 to v7.1.0. What worked for me was to remove the node_modules folder, the package-lock.json, and trigger again an npm install. It seems that for some dependencies the right version was not picked up.

After an upgrade to sb@7.1.1., removing node_modules and package-lock.json solved it for me. Before that, theme.typography font monospaced and others were breaking in MDX files with links 🔗 and monospaced code literals.

think-carlo commented 1 year ago

I upgrade to v7.1.0, removed node_modules and package-lock.json, and did a fresh npm install. Still having the same issue using the IconGallery component.

millsb commented 1 year ago

I was able to solve this. My issue had to do with the fact that my stories were loaded from a separate package in our mono-repo which had it's own package.json which specified @storybook/blocks as a dependency. Presumably this was causing a conflict during mdx compilation. Removing the dependency within the story package fixed the problem.

think-carlo commented 1 year ago

@millsb unfortunately that won't help my issue, I don't have that listed as a dependency within package.json. Here's what ours looks like:

{
  "name": "component-ui",
  "version": "1.26.1",
  "description": "React UI Component Library",
  "main": "dist/main.js",
  "module": "src/index.js",
  "scripts": {
    "analyze": "npm run build -- --analyze",
    "build:ui": "webpack --config build/config/webpack.config.babel.js",
    "build": "npm run tokens:prod && npm run build:ui",
    "build-icons": "node ./build/scripts/combine-svg.js",
    "build-storybook": "STORYBOOK_PATHS=true storybook build",
    "dev": "webpack serve --open --config build/config/webpack.config.babel.js",
    "tokens": "node ./build/scripts/tokens.js",
    "tokens:prod": "NODE_ENV=production node ./build/scripts/tokens.js",
    "tokens:cleanup": "git checkout -f src/styles/settings/variables/",
    "start": "STORYBOOK_PATHS=true npm run storybook",
    "storybook": "storybook dev -p 6006",
    "stylelint": "stylelint \"**/*.scss\"",
    "test": "TZ=UTC jest --coverage --watchAll",
    "prepush": "TZ=UTC jest --ci --coverage",
    "snapshot": "storybook build && percy storybook ./storybook-static",
    "percy": "percy storybook ./storybook-static",
    "release": "release-it",
    "generate": "plop"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/thinkcompanycorp-ui.git"
  },
  "author": "Think Company",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/thinkcompany/corp-ui/issues"
  },
  "homepage": "https://github.com/thinkcompany/corp-ui#readme",
  "engines": {
    "node": "~18.12.1"
  },
  "dependencies": {
    "@mdx-js/react": "^2.3.0",
    "@visx/group": "^2.10.0",
    "@visx/legend": "^2.10.0",
    "@visx/shape": "^2.12.2",
    "classnames": "^2.3.2",
    "core-js": "^3.26.1",
    "css-loader": "^3.4.2",
    "d3-color": "^3.1.0",
    "d3-scale": "^4.0.2",
    "dompurify": "^2.4.1",
    "focus-trap-react": "^8.5.1",
    "headroom.js": "^0.12.0",
    "http": "^0.0.1-security",
    "lodash": "^4.17.21",
    "normalize.css": "^8.0.1",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-autosuggest": "^10.1.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.44.3",
    "react-intersection-observer": "^8.32.0",
    "react-loading-skeleton": "^3.1.0",
    "react-portal": "^4.2.2",
    "react-scripts": "^5.0.1",
    "react-slick": "^0.29.0",
    "react-spring": "^9.5.5",
    "react-tooltip": "^4.5.1",
    "underscore": "^1.13.6",
    "use-resize-observer": "^9.1.0",
    "victory": "^36.6.8",
    "video.js": "^7.20.3"
  },
  "devDependencies": {
    "@babel/cli": "^7.19.3",
    "@babel/core": "^7.20.5",
    "@babel/eslint-parser": "^7.19.1",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@babel/register": "^7.18.9",
    "@percy-io/in-percy": "^0.1.11",
    "@percy/cli": "^1.16.0",
    "@percy/storybook": "^4.3.6",
    "@storybook/addon-a11y": "^7.1.0",
    "@storybook/addon-docs": "^7.1.0",
    "@storybook/addon-essentials": "^7.1.0",
    "@storybook/addon-mdx-gfm": "^7.1.0",
    "@storybook/react": "^7.1.0",
    "@storybook/react-webpack5": "^7.1.0",
    "@storybook/theming": "^7.1.0",
    "@testing-library/react": "^10.4.9",
    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
    "@types/jest": "^29.2.3",
    "autoprefixer": "^9.7.4",
    "babel-jest": "^29.3.1",
    "babel-loader": "^8.2.5",
    "browser-resolve": "^2.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-minimizer-webpack-plugin": "^3.0.2",
    "eslint": "^8.28.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-storybook": "^0.6.12",
    "eslint-webpack-plugin": "^3.2.0",
    "file-loader": "^6.2.0",
    "fs-extra": "^8.1.0",
    "html-webpack-plugin": "^5.5.0",
    "husky": "^4.2.3",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.3.1",
    "jest-environment-jsdom": "^29.3.1",
    "lint-staged": "^10.5.4",
    "mini-css-extract-plugin": "^1.6.0",
    "opener": "^1.5.1",
    "plop": "^3.1.1",
    "postcss": "^8.4.19",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-loader": "^5.3.0",
    "prettier": "^2.8.0",
    "release-it": "^15.5.0",
    "sass": "^1.56.1",
    "sass-loader": "^11.1.1",
    "storybook": "^7.1.0",
    "style-loader": "^2.0.0",
    "stylelint": "^14.15.0",
    "stylelint-config-prettier": "^9.0.4",
    "stylelint-config-recommended-scss": "^7.0.0",
    "stylelint-order": "^5.0.0",
    "stylelint-scss": "^4.3.0",
    "stylelint-webpack-plugin": "^3.3.0",
    "svg-sprite": "^2.0.2",
    "terser-webpack-plugin": "^5.3.6",
    "uuid": "^8.3.2",
    "webpack": "^5.75.0",
    "webpack-bundle-analyzer": "^4.7.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^4.11.1"
  },
  "overrides": {
    "d3-color": "^3.1.0",
    "trim-newlines": "^3.0.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "npm run prepush"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": "eslint --cache --fix",
    "*.scss": "stylelint --syntax=scss --fix"
  }
}

jerriclynsjohn commented 1 year ago

Faced this problem after upgrading to 7.2.0, removing both node_modules and package-lock.json and redoing an npm i resolved the issue

Tamir198 commented 1 year ago

Removing node_modules and package-lock.json worked for me.

For me I am using storybook 7.0.24, don't forget to run npm i after.

rlebascle commented 1 year ago

I had to remove node_modules and package-lock.json as well. Storybook 7.2.1 et react/vite/typescript here.

Th3S4mur41 commented 1 year ago

Rmoving node_modules and package-lock.json and running npm i also solved the issue for me, unfortunately, 2 days later dependabot updated the following dependencies and the issue was back again

Same workaround fixed the issue again, but it would be interesting to find the root cause

broksonic21 commented 1 year ago

We ran into that too @Th3S4mur41 . In our case, the fix was the following:

Use Dependabot groups: https://github.blog/changelog/2023-06-30-grouped-version-updates-for-dependabot-public-beta/ to get all @storybook and storybook into one PR (vs separate PRs)
We also had a dependency on https://www.npmjs.com/package/@etchteam/storybook-addon-status --- since that wasn't updated, it's transitive dependencies on @storybook/ got out of date. So I'd look at any other packages that have transitive dependencies on @storybook/ that didn't get updated (via npm ls or yarn list). In our case, we were able to work around that by putting those transitive dependencies (or at least enough to trigger them all to update) as direct dependencies. For us, adding @storybook/api to our package.json directly was enough to cause everything to get updated on Dependabot PRs as it forced reevaluation of the etch team dependency.

With those two, we haven't run into this bug again.

Th3S4mur41 commented 1 year ago

Thanks @broksonic21 I missed the announcement for this feature. I'll definitely give it a try 👍

AngusMacrae commented 1 year ago

I've tried removing node_modules, deleting pnpm lock file etc, and am still facing this error with all versions since 7.0.0. I'm using webpack btw. Very frustrating

adamburmister commented 1 year ago

Still happening on a fresh project for me. Storybook is currently unusable with react-vite.

github-actions[bot] commented 1 year ago

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

FlorianBurgevin commented 1 year ago

Pretty clear no ? Everything is explained

Th3S4mur41 commented 1 year ago

Using Dependabot groups as suggested by @broksonic21 solved the problem for us. We just had to add @storybook/addons and @storybook/theming additionally to the mentioned @storybook/api as direct dependency to make it work.

ajbrun commented 1 year ago

Rmoving node_modules and package-lock.json and running npm i also solved the issue for me, unfortunately, 2 days later dependabot updated the following dependencies and the issue was back again

Same workaround fixed the issue again, but it would be interesting to find the root cause

I'm getting this issue. Removing node_modules and package-lock file does help, but is obviously only short term. I've applied dependabot grouping, but knowing it's not reintroduced would also be useful 👍

@Th3S4mur41 - very slightly off topic, but what was the command you ran to catch this issue in CI? I've tried using various commands using storybook test runner and suggestions in storybookjs/test-runner#36 but none have helped. It doesn't appear to be catching console errors from MDX docs pages for me. Is the repo from your sceenshot publicly accessible?

Th3S4mur41 commented 1 year ago

@Th3S4mur41 - very slightly off topic, but what was the command you ran to catch this issue in CI? I've tried using various commands using storybook test runner and suggestions in storybookjs/test-runner#36 but none have helped. It doesn't appear to be catching console errors from MDX docs pages for me. Is the repo from your sceenshot publicly accessible?

@ajbrun if I remember correctly, it was the UI Review in Chromatic that found the unintended difference. Usually we don't deploy to chromatic for dependabot updates to save quota, but after first spotting this problem, we temporarily activated the deployment to avoid running into the issue in production

francesc79 commented 11 months ago

in my case I needed to add

resolve: { dedupe: [ ... '@storybook/blocks', '@storybook/react', ], viteConfig -> main.ts

VictorJSV commented 11 months ago

@francesc79 worked for me!

//.storybook/main.ts
async viteFinal(config) {
    return mergeConfig(config, {
      resolve: { dedupe: [ '@storybook/blocks', '@storybook/react', ] },
    });
  },

ddiasfront commented 11 months ago

Removing node_modules and package-lock.json worked for me.

For me I am using storybook 7.0.24, don't forget to run npm i after.

That's the workaround which worked for me.

I'm using the latest version now 7.6.5.

Have a nice day lol.

joshuaaron commented 11 months ago

in my case I needed to add

resolve: { dedupe: [ ... '@storybook/blocks', '@storybook/react', ], viteConfig -> main.ts

This also fixed it for me, thanks!

saravanan10393 commented 10 months ago

I am getting the same issue, none of the steps mentions above worked out for me I am using webpack and upgraded storybook from 7.0.25 to 7.6.6.

Here is the dependencies

  "devDependencies": {
    "@storybook/addon-docs": "7.6.6",
    "@storybook/addon-essentials": "7.6.6",
    "@storybook/addon-interactions": "7.6.6",
    "@storybook/addon-links": "7.6.6",
    "@storybook/blocks": "7.6.6",
    "@storybook/react": "7.6.6",
    "@storybook/react-webpack5": "7.6.6",
    "@storybook/testing-library": "0.2.2",
    "remark-gfm": "3.0.1",
    "storybook": "7.6.6",
    "styled-components": "5.3.1"
  }

shannonhochkins commented 6 months ago

Ran into this when upgrading storybook from 7 -> 8, after hours of debugging, I found that this particular fonts property is attempting to retrieve via a useTheme hook, which is then used via the @storybook/theming package.

The way I solved this was to define the jsx decorator with the theme in the preview.tsx (or preview.js if not using typescript)

import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { ThemeProvider } from '@storybook/theming';

const THEME = {
  typography: {
    fonts: {
      base: 'Arial, sans-serif',
      mono: 'Courier, monospace'
    }
  }
};
export default {
  decorators: [
    withThemeFromJSXProvider({
      themes: {
        dark: THEME,
        light: THEME,
      },
      defaultTheme: 'dark',
      Provider: ThemeProvider,
    }),
  ]
}

All the docs say to import the ThemeProvider from @emotion/react which might be true for some use cases, but for the particular case of the Source component using the useTheme hook from the @storybook/theming package, this solved it!

storybookjs / storybook