Storybook: Cannot read property 'defaultText' of undefined when markdown is added

[kushalmahajan]

Using storybook 5.1.1 and a few add-ons registered - @storybook/addon-info storybook-addon-jsx @storybook/addon-knobs and a CRA typescript cut out.

This doesn't works.

import React from "react";
import { withInfo } from "@storybook/addon-info";
import Label from "./label";
import { stories } from '../storybook';
import { text, boolean } from '@storybook/addon-knobs/react';

stories.add(
    "Label",
    () => (
        <Label
            text={text('text', 'Sample label')}
            isActive={boolean('isActive', true)}
        />
    ),
    {
        info: {
            text: `
                description or documentation about my component, supports markdown
                ~~~js
                    <Label
                        text={text('text', 'Sample label')}
                        isActive={boolean('isActive', true)}
                    />
                ~~~
            `
        }
    }
);

But as soon as I remove the below code, it renders atleast

~~~js
<Label
    text={text('text', 'Sample label')}
    isActive={boolean('isActive', true)}
/>
~~~

Exact ERROR

TypeError: Cannot read property 'defaultText' of undefined
    at http://localhost:9001/vendors~main.5f6f9e23f73905b9af8f.bundle.js:11483:24
    at handleInterpolation (http://localhost:9001/vendors~main.5f6f9e23f73905b9af8f.bundle.js:1864:24)
    at serializeStyles (http://localhost:9001/vendors~main.5f6f9e23f73905b9af8f.bundle.js:1949:15)
    at http://localhost:9001/vendors~main.5f6f9e23f73905b9af8f.bundle.js:2396:100
    at updateContextConsumer (http://localhost:9001/vendors~main.5f6f9e23f73905b9af8f.bundle.js:89332:19)
    at beginWork (http://localhost:9001/vendors~main.5f6f9e23f73905b9af8f.bundle.js:89520:14)
    at performUnitOfWork (http://localhost:9001/vendors~main.5f6f9e23f73905b9af8f.bundle.js:93160:12)
    at workLoop (http://localhost:9001/vendors~main.5f6f9e23f73905b9af8f.bundle.js:93200:24)
    at renderRoot (http://localhost:9001/vendors~main.5f6f9e23f73905b9af8f.bundle.js:93283:7)
    at performWorkOnRoot (http://localhost:9001/vendors~main.5f6f9e23f73905b9af8f.bundle.js:94190:7)

[dstroot]

Exact same issue here.

storiesOf('Pac Life|Chart', module)
  .addParameters({
    info: {
      inline: true,
      header: false,
      text: `This supports markdown!

      ~~~js
      console.log("hello");
      ~~~
      `,
    },
  })
  .add('show chart', () => <Chart data={data} />);

If I remove this:

      ~~~js
      console.log("hello");
      ~~~

It works.

[aralroca]

I have exact the same issue

[JonathanSpeek]

I have this issue as well... With 50+ components, removing the JS markdown from each story isn't very doable.

[nelsieborja]

Same issue using storybook 5.1.3 with @storybook/addon-info

[JonathanSpeek]

Anyone have a workaround that doesn't involve gutting all js in markdown?

[sindrisig]

Same issue here.

[liamross]

The issue is only present when you try to add code blocks to the markdown. For basic documentation it works fine, but as soon as you insert a code block into the markdown it attempts to use the syntaxhighlighter.

https://github.com/storybookjs/storybook/blob/7ee997698df4908ec716c5cfb6b59053469b04a9/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx#L32-L46

It breaks at line 36 specifically, at color: theme.color.defaultText, (but it would break anyways later on, this is just the first time you are tunneling into theme)

This is because theme is coming through as {} so theme.color is undefined and thus it breaks at theme.color.defaultText. Not sure why the theme is an empty object in this case, I'm not too familiar with the code / emotion-js which I think the theming is using.

Here's what it should be:

https://github.com/storybookjs/storybook/blob/b19e5bc5c36d6d51257ae6f1eb43872634013813/lib/theming/src/base.ts#L36

Here's where it is added to the theme:

https://github.com/storybookjs/storybook/blob/b19e5bc5c36d6d51257ae6f1eb43872634013813/lib/theming/src/global.ts#L104

Note: This is the final bug preventing our team from implementing this for a TypeScript-based ui-kit. All other major bugs seemed to have been resolved, this is the final crashing bug

[jmlivingston]

This stopped working for me as well, but I figured out an easy workaround until this is fixed. Basically install marked to compile your markdown into HTML.

npm i marked -D

import { storiesOf } from '@storybook/react'
import marked from 'marked'
import React from 'react'
import readMe from '../../README.md'

storiesOf('Welcome', module).add('Read Me', () => <div />, {
  info: {
    text: marked(readMe)
  }
})

[bethrezen]

Hello, everyone.
Thanks @liamross for error details. I have something more to share with you.
It seems that this addon modifies the story itself and that is the root of problems.
Storybook renders two different React roots - one for storybook UI and another one for the story itself. In last case we have very simple react tree and we do not have ThemeProvider there, so SyntaxHighlighter expecting theme variables fails with the error.

You may think of decorating Story with ThemeProvider, but beware - this can cause more problems then you think as your React components inside story may behave in a different way, especially if they are using some styling solution.

The solution by @jmlivingston seems to be working fine as it does not rely on SyntaxHighlighter and the Theme as well.

[shilman]

@ndelangen If addon-info requires ThemeProvider per @bethrezen 's comment (thanks!) then the docs should be updated to have users add a decorator. Or the addon itself should be updated to create its own. What a mess!

[juanmait]

@shilman apparently there is no workaround I think for the case of having the markdown as a part of the component documentation itself. That tag should be removed. I don't think anyone would be happy removing component's documentation. In my case, I can't use storybook with info addon anymore because the warning appears on top of everything and it doesn't matter if you set the inline option or not.

To be more precise, this causes the error too:

import React from 'react'

/**
 * **Usage**
 * ~~~jsx
 * const UseMyComponent = () => <MyComponent />
 * ~~~
 */
const MyComponent = () => <p>hello</p>

[shilman]

@juanmait Thanks for the repro. I think there's a workaround for one class of error, even if it doesn't fit your use case, so I'm going to leave the tag.

[shilman]

FYI you might want to check out Storybook Docs which is designed to replace addon-info.

Here's the project description: https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a

And here's the guide to technical preview alpha you can use today: https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing

[ndelangen]

Fixed in https://github.com/storybookjs/storybook/pull/6016

@shilman Do you think we could issue a patch or alpha release with that in it?
So users can start adding code examples to their addon-info?

[dstroot]

FYI you might want to check out Storybook Docs which is designed to replace addon-info.

Here's the project description: https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a

And here's the guide to technical preview alpha you can use today: https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing

Umm... I for one am not comfortable with this advice given this warning in the docs:

"⚠️ Disclaimers
This is a very early and incomplete alpha release of SB Docs. We're making it available early to maximize community participation and feedback. We expect it to evolve a lot over the course of the alpha period..."

[juanmait]

FYI you might want to check out Storybook Docs which is designed to replace addon-info.

Here's the project description: https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a

And here's the guide to technical preview alpha you can use today: https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing

@shilman tanks, that project looks really great.

[shilman]

@dstroot Updated the disclaimer, which was written when I first released SB Docs. At this point it's a fairly complete v1, and I don't see any major changes on the horizon (tho I still reserve the right to make them!).

This is an alpha release of SB Docs. We're making it available early to maximize community participation and feedback. We expect it to evolve over the course of the alpha period, but will do our best to respect your time and work if you're an early adopter.

[andremiguelaa]

Fixed in #6016

@shilman Do you think we could issue a patch or alpha release with that in it?
So users can start adding code examples to their addon-info?

Still not working here with 5.2.0-alpha.29 :(

[smurrayatwork]

The version of addon-info 5.2.0-alpha.30 fixes this for me.

[stearruda]

I think this could be related to this issue.
Is there anyway to add the component when the Info Addon is not inline?

[AugustusZ]

This stopped working for me as well, but I figured out an easy workaround until this is fixed. Basically install marked to compile your markdown into HTML.

npm i marked -D

import { storiesOf } from '@storybook/react'
import marked from 'marked'
import React from 'react'
import readMe from '../../README.md'

storiesOf('Welcome', module).add('Read Me', () => <div />, {
  info: {
    text: marked(readMe)
  }
})

For those who couldn't update the dependencies and want to simply get rid of the error before 5.2.0 comes out, another workaround is

info: {
  text: `<pre>${readme}</pre>`,
},

but it was not as pretty as the quoted one above for sure.

[robertleeplummerjr]

This is completely not what you should do, but will allow you to limp along till the next version of storybook (v 5.2) comes out:

1. Create a file called "fix-theme.js" or similar, and reference it in each of the modules that use markdown.

2. Fill it with this:

// THIS FILE IS exactly what not to do, it exists because of https://github.com/storybookjs/storybook/issues/6981
// when Storybook v5.2 comes out remove this file, and references to it
if (!{}.color) {
  // from node_modules/@storybook/theming/src/base.ts
  const baseColor = {
    // Official color palette
    primary: '#FF4785', // coral
    secondary: '#1EA7FD', // ocean
    tertiary: '#FAFBFC',
    ancillary: '#22a699', // for code

    // Complimentary
    orange: '#FC521F',
    gold: '#FFAE00',
    green: '#66BF3C',
    seafoam: '#37D5D3',
    purple: '#6F2CAC',
    ultraviolet: '#2A0481',

    // Monochrome
    lightest: '#FFFFFF',
    lighter: '#F8F8F8',
    light: '#F3F3F3',
    mediumlight: '#EEEEEE',
    medium: '#DDDDDD',
    mediumdark: '#999999',
    dark: '#666666',
    darker: '#444444',
    darkest: '#333333',

    // For borders
    border: 'rgba(0,0,0,.1)',

    // Status
    positive: '#66BF3C',
    negative: '#FF4400',
    warning: '#E69D00',
    critical: '#FFFFFF',

    defaultText: '#333333',
    inverseText: '#FFFFFF',
  };
  const color = {...require('../node_modules/@storybook/theming/dist/themes/dark').default, ...baseColor };
  color.weight = color;
  Object.defineProperty(Object.prototype, 'color', { get: () => color, set: (v) => {} });
  Object.defineProperty(Object.prototype, 'background', { get: () => color, set: (v) => {} });
  Object.defineProperty(Object.prototype, 'typography', { get: () => color, set: (v) => {} });
}

Likely this is missing a few properties, but this worked for our private modules/components. Really though, you shouldn't do this.

[robertleeplummerjr]

Likely this isn't implemented correctly, in terms of properties lining up, but our modules loaded, so, meh. I'm not a front end dev.

[282159468]

5.2 is not resole this issues

[AugustusZ]

5.2 is not resole this issues

Hey @282159468 I updated it to 5.2.0 and it works for me.

[rally25rs]

v5.2.1 still gives me "theme.color is undefined" errors with code blocks.

    "@storybook/addon-actions": "5.2.1",
    "@storybook/addon-info": "5.2.1",
    "@storybook/addon-knobs": "5.2.1",
    "@storybook/addon-links": "5.2.1",
    "@storybook/addons": "5.2.1",
    "@storybook/react": "5.2.1",

TypeError: theme.color is undefined2 syntaxhighlighter.js:131
    Wrapper syntaxhighlighter.js:131
    handleInterpolation serialize.browser.esm.js:138
    serializeStyles serialize.browser.esm.js:237
    Styled styled-base.browser.esm.js:104
    React 15
    dispatchInteractiveEvent self-hosted:1104

_Edit_

Now it seems to be working again. Weird. It might have just been a dependency not in the correct place in node_modules, or maybe I just hit a weird edge case momentarily 🤷‍♂

[ndelangen]

@rally25rs How can I assist? do you have some way for us to debug this together?

[rally25rs]

@ndelangen rerunning an npm install and restarting storybook seemed to have fixed my issue. Maybe a dependency was out of date or not in the right place, or I just hit some weird edge case when hot reloading stories as I was editing them... not sure. Crisis averted for now I guess 😆

[sanchez]

I have noticed this issue has come back in version 5.3.0-alpha.12. The issue has occurred on both the code blocks and Story source viewing.

Thanks!

[apollonian]

Facing a similar issue. The static site works fine on dev + on running static site locally, but when deploying to prod the Info view (via @storybook/addon-info) crashes. ([email protected])

https://deploy-preview-194--devfolio-genesis.netlify.com/?path=/story/1-layout-card--demo

[shilman]

Addon-info is being superceded by addon-docs, which fixes a bunch of bugs and is easier to maintain. Please give it a try! https://medium.com/storybookjs/storybook-docspage-e185bc3622bf

[apollonian]

@shilman Awesome, thanks! I'll give it a try.

[g-francesca]

Is anyone still struggling with this issue with the addon-info?
I've just moved to 5.2.6 to 5.3.9 and I'm getting the same error.
Do you have any updates about that? Did you all move to addon-docs?

[shilman]

FYI addon-info will be deprecated in storybook 6.0 (coming in april)