Code.split JavaScript error while loading markdown into notes

Describe the bug I recently upgraded to Storybook 5.1.3 and the notes addon no longer renders markdown from an external file. When clicking on the notes tab I’m presented with a blank screen with JS errors on the console.

First JS error:

vendors~main.09cec2e9bb0f85474aec.bundle.js:110516 Uncaught TypeError: code.split is not a function
    at vendors~main.09cec2e9bb0f85474aec.bundle.js:110516
    at memoizerific (vendors~main.09cec2e9bb0f85474aec.bundle.js:89466)
    at vendors~main.09cec2e9bb0f85474aec.bundle.js:91996
    at vendors~main.09cec2e9bb0f85474aec.bundle.js:124206
    at updateContextConsumer (vendors~main.09cec2e9bb0f85474aec.bundle.js:30892)
    at beginWork (vendors~main.09cec2e9bb0f85474aec.bundle.js:31080)
    at performUnitOfWork (vendors~main.09cec2e9bb0f85474aec.bundle.js:34720)
    at workLoop (vendors~main.09cec2e9bb0f85474aec.bundle.js:34760)
    at HTMLUnknownElement.callCallback (vendors~main.09cec2e9bb0f85474aec.bundle.js:15557)
    at Object.invokeGuardedCallbackDev (vendors~main.09cec2e9bb0f85474aec.bundle.js:15607)
The above error occurred in the <Context.Consumer> component:
    in ManagerConsumer (created by NotesPanel)
    in NotesPanel (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Provider (created by Preview)
    in Provider (created by Preview)
    in Preview (created by Context.Consumer)
    in ManagerConsumer
    in Unknown (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Preview (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ChildWrapper (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.

Next error:

vendors~main.09cec2e9bb0f85474aec.bundle.js:110516 Uncaught TypeError: code.split is not a function
    at vendors~main.09cec2e9bb0f85474aec.bundle.js:110516
    at memoizerific (vendors~main.09cec2e9bb0f85474aec.bundle.js:89466)
    at vendors~main.09cec2e9bb0f85474aec.bundle.js:91996
    at vendors~main.09cec2e9bb0f85474aec.bundle.js:124206
    at updateContextConsumer (vendors~main.09cec2e9bb0f85474aec.bundle.js:30892)
    at beginWork (vendors~main.09cec2e9bb0f85474aec.bundle.js:31080)
    at performUnitOfWork (vendors~main.09cec2e9bb0f85474aec.bundle.js:34720)
    at workLoop (vendors~main.09cec2e9bb0f85474aec.bundle.js:34760)
    at renderRoot (vendors~main.09cec2e9bb0f85474aec.bundle.js:34843)
    at performWorkOnRoot (vendors~main.09cec2e9bb0f85474aec.bundle.js:35750)

The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Last error

Uncaught TypeError: code.split is not a function
    at vendors~main.09cec2e9bb0f85474aec.bundle.js:110516
    at memoizerific (vendors~main.09cec2e9bb0f85474aec.bundle.js:89466)
    at vendors~main.09cec2e9bb0f85474aec.bundle.js:91996
    at vendors~main.09cec2e9bb0f85474aec.bundle.js:124206
    at updateContextConsumer (vendors~main.09cec2e9bb0f85474aec.bundle.js:30892)
    at beginWork (vendors~main.09cec2e9bb0f85474aec.bundle.js:31080)
    at performUnitOfWork (vendors~main.09cec2e9bb0f85474aec.bundle.js:34720)
    at workLoop (vendors~main.09cec2e9bb0f85474aec.bundle.js:34760)
    at renderRoot (vendors~main.09cec2e9bb0f85474aec.bundle.js:34843)
    at performWorkOnRoot (vendors~main.09cec2e9bb0f85474aec.bundle.js:35750)

To Reproduce Steps to reproduce the behavior:

1. Upgrade from 5.0.6 to 5.1.3
2. npm run storybook
3. click on a story with notes
4. click notes tab
5. blank screen appears with errors in console

Expected behavior Rendered HTML from markdown file appears within the notes area.

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Browser: chrome, safari
• Framework: angular
• Addons: Notes
• Version: 5.1.3

Additional context I have disabled the markdown file and it returned to normal via:

{ notes: { markdown: notesFile } }
//replaced with
{ notes: 'hello world!' }

[dmigliorisi-we]

Experienced the same bug after upgrade to 5.1.8

[jremi]

I feel everyones pain on this issue. I also ran into the same problem. I am using Storybook with Vue. My vue project was created using Vue CLI 3.x. Whenever I attempted to import the markdown and associate the markdown to the Storybook notes it would fail.

However, I don’t think this issue is really a problem with Storybook. It is more an issue with making sure you have a markdown-loader setup to actually load the source markdown string into Storybook.

It would be nice for Storybook to maybe throw a more human readable error that indicates to maybe check if you have installed a markdown loader into your webpack setup.

Long story short … If you are using Vue and Storybook and ran into this issue and want to load a markdown here is what I did to fix the problem…

1. Make sure you install a markdown loader. I used https://github.com/fengyuanchen/markdown-to-vue-loader since there was a simple option that I could pass called exportSource.

Install this loader and associated dev dependencies:

$ npm install markdown-to-vue-loader vue-loader webpack --save-dev

1. Create (if not yet created) or edit (if already exists) your vue.config.js and update with the new markdown loader you just installed in step 1

module.exports = {
    chainWebpack: config => {
        config.module.rule('md')
        .test(/\.md/)
        .use('vue-loader')
        .loader('vue-loader')
        .end()
        .use('markdown-to-vue-loader')
        .loader('markdown-to-vue-loader')
        .options({
            exportSource: true
        })
    }
}

1. Final step inside your Stories file (Mine is the default stories/index.stories.js do the following: (This is just a boilerplate example)

NOTE You will see that in the notes section where we link the actual markdown , I have added .source which is provided by the markdown-to-vue-loader. This will send the raw source markdown text as a string to the Storybook formatter so that the markdown will display correctly 😃

import { storiesOf } from '@storybook/vue'
import { withKnobs, text, boolean } from '@storybook/addon-knobs'
import { action } from '@storybook/addon-actions'

import MyButton from '../components/MyButton.vue'
import MyButton_MarkdownNotes from './markdown/MyButton_MarkdownNotes.md'

const stories = storiesOf('Button', module)

stories.addDecorator(withKnobs);

stories.add('with text', () => ({
    components: { MyButton },
    props: {
      rounded: {
        default: boolean('Rounded Button', false)
      },
      text: {
        default: text('Button Label', 'Hello Storybook')
      }
    },
    methods: { 
      doSomething: action('clicked') 
    },
    template: '<my-button @click="doSomething" :rounded="rounded">{{text}}</my-button>'
  }),
  {
    notes: { 'Summary': MyButton_MarkdownNotes.source }
  })

You can now re-serve your Storybook and you should be able to now view the Markdown inside the Notes section of your component.

Hope this helps anyone who stumbles upon this.