Storybook: 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 _node_modules_ 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.



md5-7f1f970735f5fd606e03291dbf46692f



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)



md5-7f1f970735f5fd606e03291dbf46692f



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.



md5-9f1133394ed65094b40d11a161230478



    "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 _/node_modules_ 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/[email protected] while storybook was depending on @emotion/[email protected], 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/[email protected] while storybook was depending on @emotion/[email protected], 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](https://github.com/storybookjs/storybook/issues/12016#issuecomment-720886594) 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.