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)

[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

[JonathanSpeek]

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