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

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

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.

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.

@francesc79 worked for me!

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

in my case I needed to add

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

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

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

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.

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.

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.

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.

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.

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 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.

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",

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>