storybook: addon-docs Error: Cannot read property 'content' of undefined

Just got it on 5.3.17. Removing node_modules and yarn.lock helped. (cc @viniciusdacal)

Had this issue and it was indeed a duplication issue with emotion. Upgrading our (pinned) emotion dependencies fixed the problem for us. I know that the emotion team is working on providing runtime warnings for these issues like react does.

NB! I didn’t delete the yarn-lock so only got a minor change in that file.

@palashkaria the root cause is that yarn is mistakenly installing multiple versions of a package (maybe emotion?) and one of packages uses module-scoped variables, so when there are multiple versions, only one of the module’s variables gets initialized… it’s really ugly. it’s possible that there’s something funky going on in storybook. but we’ve seen this in various places and it appears to be a yarn issue.

I just hit this issue with rc.5, just commenting as @shilman you asked if @Amay88 upgraded to the latest beta.

the line in question that is failing at runtime is

 var f = i.styled.div(function(e) {
        return c({
            background: e.theme.background.content,
            display: "flex",
            justifyContent: "center",
            minHeight: "100vh",
            padding: "4rem 20px"
        }, "@media (min-width: ".concat(600, "px)"), {})
    });

For me when I set a breakpoint, I find that e.theme is an empty object.

Also seeing this on the current 6 alpha #41 - We are using Vue and not doing any custom theming and not including emotion anywhere. I think this might be a way the dependencies are being declared. We use PNPM vs NPM.

Same Problem - but even after removing package-log and reinstalling anything it’s still not working. Updated from 5.2.x to 5.3.9 …

I had to delete whole "@emotion/core@^10.0.9": ... entry from yarn.lock and re-run yarn

It worked for me when you delete node_modules and lock files and npm install again.

I just hit the same or a similar error as well, having today updated to 5.2.0 from 5.0.11.

I see the same error, unable to read content off of theme.background.content in DocsPage.js:

var DocsWrapper = _theming.styled.div(function (_ref5) {
  var theme = _ref5.theme;
  return _defineProperty({
    background: theme.background.content,
    display: 'flex',
    justifyContent: 'center',
    minHeight: '100vh',
    padding: '4rem 20px'
  }, "@media (min-width: ".concat(breakpoint * 1, "px)"), {});
});

I went through this installation guide and am using this react preset with no modifications:

module.exports = ['@storybook/addon-docs/react/preset'];

I can share my config file if it would be useful. We have previously used addon-readme, addon-ally, addon-viewport and theming with storybook-styled-components:

import { configure, addDecorator } from '@storybook/react';
import { withThemes } from 'storybook-styled-components';
import startCase from 'lodash/startCase';
import themes from '../app/themes';

const themesWithNames = Object.keys(themes).reduce(
  (acc, name) => ({
    [startCase(name)]: themes[name],
    ...acc,
  }),
  {}
);

addDecorator(withThemes(themesWithNames));

configure(require.context('../app', true, /\.stories\.(js|mdx)$/), module);

I’m seeing the error in the Docs tab of all stories, including storiesOf, MDX, and CSF.

Let me know if you can add any insight into how we can solve this. Thank you!

Just a small suggestion. You can check for duplicated packages (eg. emotion in this case) using https://github.com/atlassian/yarn-deduplicate

upgraded from 5.2.3 -> 5.2.5 & faced this error; removing node_modules & yarn.lock fixed it, but that seems a bit too extreme; Any idea what the root cause could be? (got the error in the same place, theme.background.content)

To follow up on my comment above, I no longer have this error –

• I upgraded to Storybook 5.2.1
• When doing yarn upgrade-interactive I made sure to select the @storybook/... modules and the storybook/... modules. I had neglected to update the storybook/ modules the first time.

I’m not sure which of these solved it, but one of them did. All working now, thanks @shilman !

Just to follow up on my previous comment. I believe wiping node modules fixed it for us too. Not entirely sure as someone else on my team took over and he successfully upgraded to 5.2.1 without any hiccups.

Update:

I’ve realized that if I remove my yarn.lock file and write it again, all the dependencies will be updated (of course) but this bug goes away.

Now I’m trying to figure out which dependency is breaking/impacting directly on storybook. My guess is maybe some from @babel because it’s the only common dependency between my component library and storybook.

But I still have no evidences of that.

@codeincontext @city41 can you also try this approach and see if it works?

@city41 Thanks so much for the heads up. I know you’ve been using docs for awhile and there were some changes about how docs are configured over the course of the beta up until the RC. I’m wondering if your config is current. Specifically:

• you should be using the react preset for react, not the common preset
• if you’re doing a manual config you should consult https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md#manual-configuration for the latest

I suggest this because it looks like maybe the docs.container parameter is not getting properly set up.

Hi everyone! Seems like there hasn’t been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don’t have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!