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]

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.