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

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)

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 12
Comments: 34 (8 by maintainers)

Most upvoted comments

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

+10

liamross on Jun 12, 2019

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

JonathanSpeek on Jun 7, 2019

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

smurrayatwork on Jun 25, 2019

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)
  }
})

jmlivingston on Jun 14, 2019

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?

g-francesca on Feb 7, 2020

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.

AugustusZ on Sep 4, 2019

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

shilman on Feb 7, 2020

5.2 is not resole this issues

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

AugustusZ on Sep 18, 2019

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:

Create a file called “fix-theme.js” or similar, and reference it in each of the modules that use markdown.
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 on Sep 9, 2019

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?

ndelangen on Jun 17, 2019

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

JonathanSpeek on Jun 11, 2019