Storybook: Code.split JavaScript error while loading markdown into notes

Created on 14 Jun 2019 · 14Comments · Source: storybookjs/storybook

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:

Upgrade from 5.0.6 to 5.1.3
npm run storybook
click on a story with notes
click notes tab
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!' }

notes bug inactive

Source

iammattq

Most helpful comment

Experienced the same bug after upgrade to 5.1.8

dmigliorisi-we on 20 Jun 2019

👍6

All 14 comments

Experienced the same bug after upgrade to 5.1.8

dmigliorisi-we on 20 Jun 2019

👍6

Faced the exact same issue today with 5.1.8

ruudyroon on 28 Jun 2019

Any ideas if someone is working on fixing this?

dmigliorisi-we on 10 Jul 2019

@iammattq @dmigliorisi-we @ruudyroon Can you post the code a story that fails for you?

I need to see the code for how you do:

from an external file

ndelangen on 13 Jul 2019

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!

stale[bot] on 3 Aug 2019

I have the same problem in 5.1.10

itayod on 12 Aug 2019

I have found the problem, I passed directly the imported "readme" variable which is {default: 'my readme'}

adding readme.default fixed

import * as readme from './README.md';
...
notes: {
        markdown: readme.default
...

itayod on 12 Aug 2019

👍2

stale[bot] on 2 Sep 2019

Hello,
It seems like it is still bugged in 5.1.11.
Any news about this issue ?

Alex85651 on 12 Sep 2019

@Alex85651 We haven't received any PRs to address this issue. Happy to review/merge/release if one comes in.

On a related note, please take a look at Storybook Docs, which is intended to replace addon-info and addon-notes, doesn't have this problem, and is being more actively maintained: https://medium.com/storybookjs/storybook-docspage-e185bc3622bf

shilman on 13 Sep 2019

👍1

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....

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

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

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.

jremi on 2 Oct 2019

👍2

stale[bot] on 24 Oct 2019

stale[bot] on 20 Nov 2019

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

stale[bot] on 20 Dec 2019

Was this page helpful?

0 / 5 - 0 ratings