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.

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