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

[Brave-Turtle]

Hello everyone. I'm using the newest storybook/react with addon-docs, both version 5.2.0-beta.10. Right now I have a problem running the example from the official Storybook Docs: Technical Preview google docs. When I click Docs panel I get an error Cannot read property 'content' of undefined

Bug

Steps to reproduce

Configure the new Storybook beta with Docs addon and TypeScript. Run Storybook and click Docs panel.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 5.2.0-beta.10
• @storybook/addon-docs 5.2.0-beta.10

Screenshots / Screencast / Code Snippets (Optional)

Storybook config.js

Storybook presets.js

Story

Example Component is a simple div with Hello text in it.

[stale[bot]]

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!

[shilman]

Sorry I somehow missed the notification for this. Did you figure it out? Or upgrade to the latest beta?

[city41]

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.

[shilman]

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

[city41]

I did follow the new docs. Still no luck, although we had some webpack config customizations that are probably getting in the way.

I'm headed for vacation tomorrow, so I'll be radio silence on this for a couple weeks. I plan to scrap our storybook and webpack config and start over. I'm hoping we can eliminate some of our custom config with more presets.

[shilman]

@city41 have a great vacation! and when you get back, let me know how i can help. i want to make sure the setup is clean & simple for all but the most custom configurations.

[taylorbf]

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!

[codeincontext]

I also had the same issue following the guide (for the first time)

[raulfdm]

Same case here... I'll just paste more data here to maybe make it easier to identify.

Video

Screen record with all details: https://vimeo.com/360658919

Version

I update from 5.1.1 to 5.2.1

.storybook/

.babelrc

{
  "presets": ["@babel/preset-env", "react-app"]
}

addons.js

import 'storybook-readme/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-viewport/register';
import '@storybook/addon-a11y/register';
import '@storybook/addon-storysource/register';

config.js

import { configure, addDecorator, addParameters } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
import { addReadme } from 'storybook-readme';

/* TODO: Remove this dependency */
// import requireContext from 'require-context.macro';

import './styles.scss';

addDecorator(withA11y);

/* Enable README for all stories */
addDecorator(addReadme);
addParameters({
  readme: {
    codeTheme: 'github',
    StoryPreview: ({ children }) => children
  }
});

configure(
  require.context('../src', true, /\.stories\.(js|jsx|ts|tsx|mdx)$/),
  module
);

presets.js

module.exports = [
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true
    }
  }
];

webpack.config.js

const path = require('path');

// Export a function. Accept the base config as the only param.

/* babel-loader is been used to build storybook */
module.exports = async ({ config, mode }) => {
  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  config.module.rules.push({
    test: /\.scss$/,
    loaders: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: { plugins: () => [require('autoprefixer')()] }
      },
      'sass-loader'
    ],
    include: path.resolve(__dirname, '../')
  });

  // **NOTE** If I remove this, does not fix the bug either change anything
  config.module.rules.push({
    test: /\.stories.jsx?$/,
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    enforce: 'pre'
  });

  // Return the altered config
  return config;
};

Unfortunately I cannot share the project because it's an internal one. If you need some other information, let me know.

[raulfdm]

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?

[eeshdarthvader]

Same case here...DocsPage is expecting theme parameter, otherwise it is giving this error.

Cannot read 'content' of undefined

[eeshdarthvader]

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

[tay1orjones]

Adding another data point. Also seeing this when upgrading from v5.1.7 to v5.2.1. We're mixing storiesOf with a couple stories refactored to CSF, also using full-control webpack. Upgrading dependencies has no impact.

Link to all config files

[city41]

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.

[taylorbf]

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 !

[stale[bot]]

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!

[palashkaria]

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)

[shilman]

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

[nazarTrynko]

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

[daitan-rovaris]

@nazarTrynko that did it to me! thanks

[WilliamIPark]

I had a similar problem about subcomponents being undefined after installing the addon-knobs plugin, and fixed the issue in the same way. (Remove lock file and run yarn again)

[uncenteredDiv]

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

[caspardue]

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.

[warmbowski]

I had this issue recently when upgrading to storybook @5.3.17 from @5.2.0-rc4. I removed the storybook-host@5.1.0 package and it started working again.

[hasparus]

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

[viniciusdacal]

same error here: 5.3.17.

[caspardue]

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

[skattabrain]

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.

[dancingshell]

I had multiple storybook versions in my monorepo (lerna) and I had to add "nohoist": ["**/@storybook/**"] to my root package.json to get each package to use the correct version

[scoutrul]

Try to use <style module ...> property