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

[hc-12]

Describe the bug
Getting an empty screen with the following error:

TypeError: typography is undefined

Whole stack can be seen in screenshot.

I suspect that the theme object has been passed on by the theme provider.
I'm not using any addons.

Expected behavior
Not to crash?

Screenshots

System:

• Framework: react 16.8.2
• Version: 5.0.0-rc.1

Additional context:
It used to work with v5.0.0-alpha.1

[shilman]

@hc-12 Thanks for the bug report. Can you tell me more about what kind of project you're running it in? Are you using a theme or just the default? Any repo you can share?

[shilman]

cc @domyen @ndelangen

[hc-12]

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

[shilman]

@hc-12 I just released a new version with a ton of styling fixes that somehow didn't get released earlier. Mind giving it a try and see if it fixes the problem? If not, we can dig in further.

https://github.com/storybooks/storybook/releases/tag/v5.0.0-rc.3

Many thanks!

[zoltanbedi]

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/**"
    ]
  }

[hc-12]

@shilman I will give a crack!
@B3zo0 Definitely looks familiar, it could be the same error. I'm using lerna but currently not hoisting any dependencies.

[shilman]

Ta-da!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.0-rc.4 containing PR #5679 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

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

[hc-12]

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

Thank you, much appreciated :)

[billyvg]

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.

[sulco]

FYI, I had the same Cannot read property 'fonts' of undefined and after a lot of trial and error I managed to get rid of it after uninstalling emotion-theming package I have in my project's dependencies.

I still need that package though ;)

[wmonk]

I am also receiving this error. In my own dependencies I have [email protected], but I can see the @storybook/theming requires version 10.x.x.

Possibly it's something to do with that.

[benweier]

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
[[email protected]]
├─┬ @appbaseio/[email protected]
│ └── [email protected] 
└─┬ @storybook/[email protected]
  └─┬ @storybook/[email protected]
    └── [email protected]

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

❯ npm ls emotion-theming
[[email protected]]
├─┬ @appbaseio/[email protected]
│ └── [email protected] 
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └── [email protected] 
└── [email protected]

[denkristoffer]

Adding emotion-theming@10 is not always a viable solution, for instance I'm on a project that's still using emotion-theming@9 itself. Imo the fix from next should be backported to v5.0 if possible.

[shilman]

@denkristoffer which fix?

[denkristoffer]

@shilman This issue seems to have been fixed in between the 5.0 release and the 5.1 alpha, although I can't find the change in the git log. I was assuming it was because the dependency had been added explicitly. Is that not correct?

[shilman]

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.

[paul-sachs]

@shilman I also just ran into this issue. My issue is that because I have [email protected] 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.

[shilman]

Thanks @psachs21. @ndelangen can you chime in here?

[ndelangen]

Yeah I have an idea how to fix this.

[ndelangen]

@psachs21 I could use your review on the PR I made

[paul-sachs]

I'll definitely take a look

On Fri, May 17, 2019 at 6:32 AM Norbert de Langen [e-mail]
wrote:

@psachs21 https://github.com/psachs21 I could use your review on the PR
I made

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/storybooks/storybook/issues/5663?email_source=notifications&email_token=ACXLLAF4DQENAMWDFO3TUF3PV2CSNA5CNFSM4GYJARQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVUMVPQ#issuecomment-493406910,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACXLLAAIKYA3RPTC3IOKHB3PV2CSNANCNFSM4GYJARQA
.

[shilman]

Good golly!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-rc.1 containing PR #6808 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

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

[paul-sachs]

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.

[dcayers]

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 [email protected] 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!

[elisechant]

To the point about multiple versions of emotion, I recommend you install @storybook/theming with @storybook/addons.

Storybook Theming is a wrapper library for emotion. It ensures a single version of emotion is used everywhere.
From the README.

Create a noop manager.js, with:

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming/create';

addons.setConfig({
});

This will streamline your emotion versions in a sane way.