storybook: 5.0.0-rc.1 typography of undefined, empty theme object

I received this error as well despite using the exact same Storybook 5 config on another project without issues.

Turns out it was a module resolution issue with a different package

❯ npm ls emotion-theming
[package-name@x.y.z]
├─┬ @appbaseio/reactivesearch@2.16.1
│ └── emotion-theming@9.2.9 
└─┬ @storybook/addon-actions@5.0.1
  └─┬ @storybook/theming@5.0.1
    └── emotion-theming@10.0.9

I installed emotion-theming@10 as a devDependency and it fixed it right up

❯ npm ls emotion-theming
[package-name@x.y.z]
├─┬ @appbaseio/reactivesearch@2.16.1
│ └── emotion-theming@9.2.9 
├─┬ @storybook/addon-actions@5.0.2
│ └─┬ @storybook/theming@5.0.2
│   └── emotion-theming@10.0.9 
└── emotion-theming@10.0.9

I’m still getting this error with 5.0.1 -

Uncaught TypeError: Cannot read property 'fonts' of undefined
    at vendors~main.5c13a3c4dbf1731d8c28.bundle.js:33798
    at Object.memoizerific [as createReset] (vendors~main.5c13a3c4dbf1731d8c28.bundle.js:140543)
    at vendors~main.5c13a3c4dbf1731d8c28.bundle.js:33862
    at memoizerific (vendors~main.5c13a3c4dbf1731d8c28.bundle.js:140543)
    at vendors~main.5c13a3c4dbf1731d8c28.bundle.js:1268
    at updateContextConsumer (vendors~main.5c13a3c4dbf1731d8c28.bundle.js:59451)
    at beginWork (vendors~main.5c13a3c4dbf1731d8c28.bundle.js:59639)
    at performUnitOfWork (vendors~main.5c13a3c4dbf1731d8c28.bundle.js:63279)
    at workLoop (vendors~main.5c13a3c4dbf1731d8c28.bundle.js:63319)
    at HTMLUnknownElement.callCallback (vendors~main.5c13a3c4dbf1731d8c28.bundle.js:44162)

I even ran npx -p @storybook/cli sb init --force to try to start fresh in our repo and and am still receiving this error. I also had to manually add @storybook/theming because it was throwing a module not found error with @emotion/core/package.json. We are using emotion@9 in our core product, otherwise not sure what the issue can be. This is in the https://github.com/getsentry/sentry repo.

I am also receiving this error. In my own dependencies I have emotion-theming@9.x.x, but I can see the @storybook/theming requires version 10.x.x.

Possibly it’s something to do with that.

I think this is related to #5532. For me it was caused by multiple @storybook/theming package. Because I work with a monorepo yarn hoisted some @storybook package but it also added some in the package’s directory. I’ve added nohoist option to the root package.json like this:

  "workspaces": {
    "packages": [
      "packages/*",
      "examples/*"
    ],
    "nohoist": [
      "**@storybook/**"
    ]
  }

Thanks for the reply.

The setup has no custom config and no themes. I even commented out loading of stories. I wasn’t entirely sure whether you need @storybook/theming. I did both with and without @storybook/theming seem to have made no difference.

Edit: The stacktrace lead to this particular line: https://github.com/storybooks/storybook/blob/5158d13ff2af306b315c02a7d1325ef59562d230/lib/theming/src/global.ts#L14

Hi, to anyone still looking at this issue, I ran into it as well. My issues were with my typescript version not being the same as storybook’s, as well as a component library running an older version of storybook with emotion.

To fix it, I changed my version (3.5.1) of typescript to 3.4.1 and it seemed to do the trick.

Also, In my case I have to reference the individual components of a library instead of the components exported from its build. These components relied on emotion@9.2.9 as well as react-emotion and also caused this bug. Fortunately for me, the lib only made use of styled from react-emotion. So I just added an alias in my webpack build for storybook to pass any ref of react-emotion to @emotion/styled:

'react-emotion': path.join(__dirname, "..", "node_modules", "@emotion", "styled")

I also used @B3zo0 's suggestion about nohoist to keep that library’s use of storybook at bay.

Hope this helps someone!

Sorry If I’m unclear about what I’m doing. This is only like my second or third GitHub post ever!

Super excited to upgrade to to storybook@5. @ndelangen, sorry I totally forgot to get around to reviewing the code, the last week just swamped me badly.

@shilman I also just ran into this issue. My issue is that because I have emotion-theming@9.x in my package, the ThemeProvider included is from this version (node_modules/emotion-theming) as opposed to node_modules/@storybook/theming/node_modules/emotion-theming. I suspect this has to do with the storybook dll (a webpack dll) that links all imports from emotion-theming to the root node_modules directory. This is just a suspicion though since i haven’t traced it 100%. All i know is the theming module (node_modules/@storybook/theming/node_modules/emotion-theming) is never loaded.

Thanks @denkristoffer. Starting the 5.1 release process now so probably won’t bother tracking it down for 5.0 unless it takes too long to release 5.1 and there’s an easy fix to backport.

@shilman Sorry for the delay, i tried it today and it works!

Thank you, much appreciated 😃