storybook: Uncaught TypeError: Cannot read property 'fonts' of undefined

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.

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 /node_modules and yarn.lock (and then installing everything again). I know that it is not professional solution, but it works.

@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)

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.

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

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 🙂

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.

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

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.

Same here guys =0

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;

@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?

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

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

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

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

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

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.

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

I’ve isolated the issue a bit further - I think there’s a bug where things simply break if there are multiple instances of @storybook/theming in your dependency tree.

@tylercraft try using this in your webpackFinal!

  webpackFinal(config) {
    Object.assign(config.resolve.alias, {
      '@storybook/theming': dirname(require.resolve('@storybook/theming/package.json'))
    })
    return config;
  },

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

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…

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

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

For anyone trying to get this to work with Gatsby, @nscmnto and @Nvveen’s solution works. 😃

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 😃