Uncaught TypeError: Cannot read property 'fonts' of undefined

[vamshi9666]

Describe the bug Ran yarn storybook after installing as per docs. And in browser console this error showed up

System:

System:
    OS: macOS 11.0
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Binaries:
    Node: 13.11.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 79.0
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.0.6 => 6.0.6
    @storybook/addon-essentials: ^6.0.6 => 6.0.6
    @storybook/addon-links: ^6.0.6 => 6.0.6
    @storybook/node-logger: ^6.0.6 => 6.0.6
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4
    @storybook/react: ^6.0.6 => 6.0.6

[schalkneethling]

@vamshi9666 I have seen this as well when trying to use IconGallery and IconItem inside a stories.js(seems to be fine inside .mdx) story. Was this your experience as well?

[vamshi9666]

I changed nothing. All I did was install and tried running yarn storybook

[shilman]

@vamshi9666 do you have a repro repo you can share?

[Fiszcz]

I have had the same problem.

When you remove _nodemodules directory and then run yarn install or npm install, this errors will disappear.

But in my case, after that I had another errors:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1431)
    at Object.useContext (react.development.js:1439)
    at useTheme (emotion-theming.browser.esm.js:112)
    at useMenu (vendors~main.fd8dd34d4e169965eb0d.bundle.js:105058)
    at Object.mapper [as current] (vendors~main.fd8dd34d4e169965eb0d.bundle.js:105491)
    at ManagerConsumer (vendors~main.fd8dd34d4e169965eb0d.bundle.js:36887)
    at renderWithHooks (vendors~main.fd8dd34d4e169965eb0d.bundle.js:129672)
    at mountIndeterminateComponent (vendors~main.fd8dd34d4e169965eb0d.bundle.js:131906)
    at beginWork$1 (vendors~main.fd8dd34d4e169965eb0d.bundle.js:133050)
    at HTMLUnknownElement.callCallback (vendors~main.fd8dd34d4e169965eb0d.bundle.js:114911)

The above error occurred in the <ManagerConsumer> component:
    in ManagerConsumer
    in Unknown (created by Layout)
    in div
    in Styled(div) (created by Sidebar)
    in Sidebar (created by Layout)
    in Layout
    in WithTheme(Layout)
    in Unknown
    in div
    in Styled(div)
    in Unknown (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1431)
    at Object.useContext (react.development.js:1439)
    at useTheme (emotion-theming.browser.esm.js:112)
    at useMenu (vendors~main.fd8dd34d4e169965eb0d.bundle.js:105058)
    at Object.mapper [as current] (vendors~main.fd8dd34d4e169965eb0d.bundle.js:105491)
    at ManagerConsumer (vendors~main.fd8dd34d4e169965eb0d.bundle.js:36887)
    at renderWithHooks (vendors~main.fd8dd34d4e169965eb0d.bundle.js:129672)
    at mountIndeterminateComponent (vendors~main.fd8dd34d4e169965eb0d.bundle.js:131906)
    at beginWork$1 (vendors~main.fd8dd34d4e169965eb0d.bundle.js:133050)
    at HTMLUnknownElement.callCallback (vendors~main.fd8dd34d4e169965eb0d.bundle.js:114911)

The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

I think that the problem is with integration between emotion and storybook after the upgrade by sb upgrade script. The above errors are from level of emotion code.

My package.json:

    "devDependencies": {
        "emotion": "^10.0.27",
        "@storybook/addon-a11y": "^6.0.7",
        "@storybook/addon-actions": "^6.0.7",
        "@storybook/addon-links": "^6.0.7",
        "@storybook/addon-viewport": "^6.0.7",
        "@storybook/react": "^6.0.7",
        "@storybook/addon-essentials": "^6.0.7",
        "@storybook/node-logger": "^6.0.7",
        "@storybook/preset-create-react-app": "^3.1.4",
        "react": "^16.8.0",
    },

For me, solution was removing _/nodemodules and yarn.lock (and then installing everything again). I know that it is not professional solution, but it works.

[bradringel]

I'm running into this as well. I upgraded our storybook from 5.3 to 6 and started seeing this. I suspect that it has to do with conflicting versions of emotion, I know i've seen that happen before. I have version 10.0.22 of @emotion/core installed, 10.0.19 of emotion-theming and a decorator that looks like this:

import { ThemeProvider } from 'emotion-theming';
import React from 'react';

import themes from '../../src/UI/themes';

const ThemeDecorator = Story => (
   <ThemeProvider theme={themes.herbert}>
      <Story />
   </ThemeProvider>
);

export default ThemeDecorator;

[philxavier]

Same here guys =0

[nelsonleite]

I'm facing the same problem (trying with "@storybook/react": "^6.0.16", upgraded from 5.3.19). Also tried removing node_modules and reinstalling, but no good.

[piemasters]

Just upgraded @storybook/react from 6.0.10 to6.0.16 and also getting this error. When I had this issue before is was to do with using ColorPalette and ColorItem but I've tried removing all uses and it didn't solve the issue. I updated @emotion/core from 10.0.27 to 10.0.35 at the same time if that's relevant.

Update: As @fiszcz said clearing out node_modules & yarn.lock fixed it for me.

[Pranit-Harekar]

Deleting yarn.lock isn't an option. I deleted node_modules however the issue still persists!!

[Nvveen]

This is an issue with multiple @emotion/core dependencies across the tree, which can be helped by forcing the version across all packages. Beware this might break any package using the older versions. In my case I was using @chakra-ui/core depending on @emotion/core@10.0.35 while storybook was depending on @emotion/core@10.0.28, so (I'm hoping) not too big of a change.

To force the versions, either do yarn install --flat and choose the version of the package you want to use, or add a resolutions field to package.json with the package name and the required version, after which you should delete the lock-file and reinstall.

For more information, see https://classic.yarnpkg.com/en/docs/cli/install/#toc-yarn-install-flat

[nelsonleite]

Following @Nvveen tip, I found yarn-deduplicate and running yarn-deduplicate --packages @emotion/core,@emotion/styled actually worked! It removed the duplicates on my yarn.lock and it seems to be working just fine 🙂

[LoicGoyet]

Following @Nvveen tip, I found yarn-deduplicate and running yarn-deduplicate --packages @emotion/core,@emotion/styled actually worked! It removed the duplicates on my yarn.lock and it seems to be working just fine 🙂

Looks great, but I think we need to keep find out a solution that would be "dependencies manager agnostic". So we need to handle this dependency issue without specific npm or yarn fix.

[posthardcode]

This is an issue with multiple @emotion/core dependencies across the tree, which can be helped by forcing the version across all packages. Beware this might break any package using the older versions. In my case I was using @chakra-ui/core depending on @emotion/core@10.0.35 while storybook was depending on @emotion/core@10.0.28, so (I'm hoping) not too big of a change.

To force the versions, either do yarn install --flat and choose the version of the package you want to use, or add a resolutions field to package.json with the package name and the required version, after which you should delete the lock-file and reinstall.

For more information, see https://classic.yarnpkg.com/en/docs/cli/install/#toc-yarn-install-flat

Thanks! In my case, running yarn-deduplicate, pointing @emotion/core to 10.0.28 in package.json resolutions, removing node_modules and then yarn seemed to work :)

[jackoliver]

For anyone trying to get this to work with Gatsby, @nscmnto and @Nvveen's solution works. :)

[deterralba]

For the npm team, using npm dedupe fixed it for me docs.npmjs.com/cli/dedupe

[anilanar]

@shilman What if I want to use a different version of emotion than the storybook packages uses? At @userlike, we use Emotion v11 pre-release.

[shilman]

@anilanar Storybook's manager (surrounding UI code) uses one version of emotion. Its preview (user code) doesn't use emotion at all, except if you're using addon-docs and in the docs tab. So if you want to use a different version of emotion, don't use addon-docs (you can disable it from essentials), and that might be all you need. If that doesn't work, perhaps there is some yarn or webpack resolution magic that forces the right version .. but I haven't tried that yet.

[Jimmydalecleveland]

I've tried to resolve this for quite some time, using the suggestions in this issue, with no success. I have a monorepo, which always makes things a little more complicated, especially with storybook historically for me.

I've narrowed it down to Emotion, no surprise there, with either emotion-theming, @emotion/core, or @emotion/styled being installed, all break my storybook with the same errors listed throughout this issue, even without using any existing stories I've written (just the ones from sb init).

I've tried deleting yarn.lock, deduplicating as suggested, and various other tinkerings to no avail. If I remove all those emotion packages, storybook runs correctly.

Mostly writing this to add another case to the problem and make it known, but if anyone has advice I will very much appreciate it.

Edit: After a few more attempts throughout the week I finally got Storybook working in my project. I wish I could say I had set of steps that makes it work, but in the end some combination of removing my emotion packages and node_modules, followed by re-installation of the emotion packages and running npx yarn-deduplicate && yarn caused it to start working.

[shilman]

For anybody who's experiencing this problem, what happens when you run Storybook with the --no-dll flag?

[SimonS]

For anybody who's experiencing this problem, what happens when you run Storybook with the --no-dll flag?

@shilman that fixes it for me.

What's the impact/risk of going forwards with that as a workaround? Given this seems like a performance mitigation, might it have an effect on CI/integrations with tools such as Chromatic?

[shilman]

@SimonS I documented the implications here: #12874 Please LMK if that needs more clarification!

[shilman]

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.28 containing PR #12874 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.27 containing PR #12874 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

[ayeletcohen]

Unfortunately I'm still facing that issue, even after upgrade to v6.0.27.

Tried upgrading my dependencies to versions required by storybook; Tried npm dedup; Tried removing node_modules and package-lock.json; Tried installing storybook without installing my own npm dependencies. But no luck, I'm still getting Uncaught TypeError: Cannot read property 'fonts' of undefined.

I used storybook in the past and would really love to introduce it to my new team, but I just can't find a way to install it. Would appreciate any help on this. Thanks.

[shilman]

@ayeletcohen Did you try running Storybook with the --no-dll flag?

[ayeletcohen]

Yes, I have, not working. I'm working on a monorepo solution, and succeeded installing storybook on the root level - but this is obviously not optimal. Thanks.

[shilman]

@ayeletcohen Glad you figured out a workaround. Hopefully we can come up with something better as part fo the 6.1 release.

[josiah-roberts]

Unfortunately I'm still facing that issue, even after upgrade to v6.0.27.

Tried upgrading my dependencies to versions required by storybook; Tried npm dedup; Tried removing node_modules and package-lock.json; Tried installing storybook without installing my own npm dependencies. But no luck, I'm still getting Uncaught TypeError: Cannot read property 'fonts' of undefined.

I used storybook in the past and would really love to introduce it to my new team, but I just can't find a way to install it. Would appreciate any help on this. Thanks.

I'm getting the ~same~ similar symptoms here. Uncaught TypeError: Cannot read property 'fonts' of undefined when I force React to a particular version, and invalid hook call otherwise.

I can resolve this by burning down yarn.lock, but that's not a viable option in production.

[choznerol]

[UPDATE] Removing node_modules fixed it for me (Storybook 6.0.26)

---

Upgrade to >= 6.1.0-alpha.33 fix Uncaught TypeError: can't access property "fonts", typography is undefined for me.

With 6.1.0-alpha.28 and 6.1.0-alpha.29, there is the same error:

With 6.1.0-alpha.30, 6.1.0-alpha.31 and 6.1.0-alpha.32, there is another error (not sure if related):

After upgrade to 6.1.0-alpha.33 the initial build is success. Mayby #12926 fixed this?

[amowu]

I tried to remove the node_modules and reinstall it, and it can runs.

[sarahbethfederman]

I'm having this issue currently, but only when running Storyshots. It's only occurring on the story where I use ColorPalette and ColorItem. The test always fails with TypeError: Cannot read property 'fonts' of undefined but running storybook works fine

[shilman]

@sarahbethfederman are you using ColorPalette/ColorItem in your stories or on your docs pages?

[sarahbethfederman]

Yes? Story in an MDX docs page 😅

[sarahbethfederman]

So seems I'm able to use the ColorPalette in the MDX doc outside of the story. I only get the issue when using it inside of a <Story /> block. I get the error in both Chromatic and Storyshots, and in Storybook when trying to display the story outside of the docs. It renders fine in docs mode. The --no-dll option also has no apparent effect.

For now I've disabled the story in Chromatic and storyshots, but I'd really like to be able to snapshot the colors. Any ideas?

[shilman]

Storybook's doc blocks require a theme context to work. I think if you provide one in a decorator you should be fine. This is not really supported usage, however.

[sarahbethfederman]

Oh yeah I was trying to do it with just the ThemeProvider. Wrapping the decorator with <DocsContainer context={context}> instead fixed it. I get that its unsupported (though it is nice to be able to create a color palette story), are there any complications you see that might arise from consuming the docs context within the stories I should be aware of? I've hacked it so that it only wraps stories with the DocsContainer if they pass an includeDocsContext parameter

[shilman]

@sarahbethfederman it shouldn't be a problem. unsupported just means that we won't go out of our way to keep it working between minor version bumps and won't provide migration instructions on major bumps. i'm hoping we'll rework a bunch of this stuff later this year, and perhaps then we can better support your use case. 🤞

[williamisnotdefined]

I have solved this problem by adding ThemeProvider in my storybook decorators.

preview.tsx

import {
  themes as SbThemes,
  ThemeProvider,
  ensure as ensureTheme,
} from "@storybook/theming";

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

const SbProviders = (Story, context) => {
  const {
    parameters: { options = {}, docs = {} },
  } = context;

  let themeVars = docs.theme;
  if (!themeVars && options.theme) {
    themeVars = options.theme;
  }

  const theme = ensureTheme(themeVars);

  return (
    <ThemeProvider theme={theme}>
      <Story {...context} />
    </ThemeProvider>
  );
};

export const decorators = [
  SbProviders,
  ...
]

[simonhermann]

Upgrading from 7.0.21 to 7.0.27 (including all addons) fixed it for me 🤷 Edit: and it breaks again with all following versions.

[kfayelun]

@vamshi9666 I have seen this as well when trying to use IconGallery and IconItem inside a stories.js(seems to be fine inside .mdx) story. Was this your experience as well?

This issue has come back for us now: Error: Cannot read properties of undefined (reading 'fonts'). We've had it before, maybe a little less than a year ago, but I can't exactly remember what triggered it then. Updating the packages fixed the issue I think (back then).

What happened now; I moved some code using <IconGallery /> from an .mdx-file to a .tsx-file and this triggered the error, just like @vamshi9666 describes 3 years ago. So it works in MDX, but not in tsx. We just upgraded to 7.4.6 last week. I have deleted node modules, doesn't help. I'd like to avoid deleting package-lock.json. We only use tailwind, so seems like it's Storybooks own packages conflicting?

Screenshots of the mdx component that works, and the tsx component that fails, not sure how much value these adds though... I can't easily create a reproduction unfortunately.

From console:

index.mjs:176 Uncaught TypeError: Cannot read properties of undefined (reading 'fonts')
    at withReset (index.mjs:176:14652)
    at handleInterpolation (index.mjs:14:3193)
    at serializeStyles (index.mjs:19:1660)
    at index.mjs:24:1381
    at index.mjs:19:2916
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateForwardRef (react-dom.development.js:19226:20)
    at beginWork (react-dom.development.js:21636:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)

react-dom.development.js:18687 The above error occurred in the <Styled(div)> component:

    at http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-D2LYYWGF.js?v=d470fd51:1445:45
    at IconGallery (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-SRLLPJOT.js?v=d470fd51:1713:22)
    at unboundStoryFn (http://localhost:6006/sb-preview/runtime.js:41:3330)
    at ErrorBoundary (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-5QULKNVV.js?v=d470fd51:27:5)
    at WithCallback (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-KRDZVWSL.js?v=d470fd51:15:23)

[enix79]

I also get this error message again. The strange thing is, that I can't find any occurrence of "@emotion" in the whole project, including node_modules...

[gehaktmolen]

I just had the aforementioned problem with the latest version of Storybook (7.5.2). Indeed no @emotion occurrences. However, installing @storybook/theming worked for me.

[simonhermann]

Thanks so much @gehaktmolen! installing @storybook/theming actually helps!

[fastndead]

Hey! I'm on storybook 7.6.17 and the issue persists. Tried reinstalling node_modules (even though it's still not a valid solution) and installing @storybook/theming. Nothing helped. I think this issue should be reopened

[enix79]

Hey @fastndead, make sure that all of your storybook dependencies have the same version and update them as a group only. This should fix the problem.

[fastndead]

@enix79 thanks for the advice! I had the same versions of the storybook packages in the package.json, but i had left ^ carets for them and yarn resolved them in all the different wrong ways. So i additional advice for people with that issue: make sure your storybook dependencies have the same fixed version

[enix79]

@fastndead, yes, ultimately what counts is what you have in your package-lock.json. So look it up there to be 100%.

[tylercraft]

I just encountered this on .mdx files using <ColorPalette /> tags.

I went through all of our package.json updates to narrow down the culprit (though I'm sure it could be different for each instance). For us, it was updating @types/react from 18.2.66 to 18.2.67. The only difference in our yarn.lock file is this:

Previously (working):

"@types/react@npm:18.2.66, @types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":

With the update that breaks it:

"@types/react@npm:18.2.67":
  version: 18.2.67
  resolution: "@types/react@npm:18.2.67"
  dependencies:
    "@types/prop-types": "*"
    "@types/scheduler": "*"
    csstype: ^3.0.2
  checksum: 9e48122b0e8d0ae20601f613aca32289eeb94d55c58ff03a7dc532d80ed289a1ba9715f14b773bd926ccdd63e503717f14264143ef531dc370063abe09dee0b2
  languageName: node
  linkType: hard

"@types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":

I'm not sure why a change in types would impact anything here.. but it does. I can consistently go back and forth on that version to break it, or have it work.

[peterschmiz]

Hi,

We have the same issue, i tried re-installing packages, deleted package-lock.json and played around with the versions, but I still have (and only for one story, where I use Typeset bloc) the error.

[kherock]

I'm also seeing this issue with a Yarn PnP and pnpm projects that have storybooks in a monorepo.

Installing @storybook/theming at the project root fixes the issue for me, which suggests that there is a missing peer dependency somewhere.

I also only experience this issue with the webpack builder - the Vite builder works fine.