storybook: Addon-Docs: Newlines in HTML MDX gives compile error

Describe the bug

When newlines are present in a MDX story you get a compilation error.

This works:

<Story name="function" height="100px">
  {() => {
    const btn = document.createElement('button');
    btn.innerHTML = 'Hello Button';
    return btn;
  }}
</Story>

This does not:

<Story name="function" height="100px">
  {() => {
    const btn = document.createElement('button');
    btn.innerHTML = 'Hello Button';

    return btn;
  }}
</Story>

System:

  System:                                                                                │+ 125 </Story>                                                                              OS: macOS 10.14.5                                                                    │<MAL  +15 ~3 ᚠ component-stor…  guide.stories.mdx  utf-8[unix]   95% ☰  119/125 ㏑ :  1
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz                                │7 lines yanked                                                                            Binaries:                                                                              ├────────────────────────────────────────────────────────────────────────────────────────
    Node: 10.15.0 - ~/.nodenv/versions/10.15.0/bin/node                                  │  1 const path = require('path')                                                            Yarn: 1.13.0 - /usr/local/bin/yarn                                                   │  2 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    npm: 6.4.1 - ~/.nodenv/versions/10.15.0/bin/npm                                      │  3 const jsonImporter = require('node-sass-json-importer')                               Browsers:                                                                              │  4 const sassTypes = require('node-sass').types
    Chrome: 76.0.3809.132                                                                │  5                                                                                         Firefox: 67.0.4                                                                      │  6 module.exports = async ({ config, mode }) => {
    Safari: 12.1.1                                                                       │  7   // Storybook tries to load svgs by url by default. We need to use an inline-loader  npmPackages:                                                                           │     some times.
    @storybook/addon-a11y: ^5.2.0-beta.36 => 5.2.0-beta.36                               │  8   // This augments the storybook rule to not include SVGs so we can configure it our    @storybook/addon-actions: ^5.2.0-beta.36 => 5.2.0-beta.36                            │    selves below.
    @storybook/addon-backgrounds: ^5.2.0-beta.36 => 5.2.0-beta.36                        │  9   // We also strip out woff/woff2 and configure how they are served separately.         @storybook/addon-docs: ^5.2.0-beta.36 => 5.2.0-beta.36                               │ 10   config.module.rules = config.module.rules.map(rule => {
    @storybook/addon-knobs: ^5.2.0-beta.36 => 5.2.0-beta.36                              │ 11     {                                                                                   @storybook/addon-storysource: ^5.2.0-beta.36 => 5.2.0-beta.36                        │ 12       if (String(rule.test) === String(/\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf
    @storybook/addon-viewport: ^5.2.0-beta.36 => 5.2.0-beta.36                           │    |woff|woff2|cur|ani|pdf)(\?.*)?$/)) {                                                   @storybook/html: ^5.2.0-beta.36 => 5.2.0-beta.36                                     │ 13         return {
    @storybook/react: ^5.2.0-beta.36 => 5.2.0-beta.36

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 26
Comments: 25 (16 by maintainers)

Most upvoted comments

This specifically:

<Canvas>
  <Story 
    name="warning"
    args={{
      status: 'warning', 
      label: 'Warning',
    }}>
    {Template.bind({})}
  </Story>
  
  <Story 
    name="neutral"
    args={{
      status: 'neutral', 
      label: 'Neutral',
    }}>
    {Template.bind({})}
  </Story>
  
  <Story 
    name="error"
    args={{
      status: 'error', 
      label: 'Error',
    }}>
    {Template.bind({})}
  </Story>
</Canvas>

andrewplummer on Dec 4, 2021

@yairEO It’s been over a year and we’re still waiting for MDX 2.0

shilman on Jun 9, 2021

@micDropper it’s a breaking change, so i’m waiting until SB 7.0 to release it. However, I will try to get a prototype working ASAP so I can figure out:

what migration steps are required for users, if any
whether i can do an earlier release with MDXv2 in it, possibly behind a feature flag?

shilman on Oct 26, 2021

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

this is still a problem in SB 7.x
you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).

FWIW we have fully upgraded to MDX2 in 7.0

shilman on Jun 8, 2023

Hey gang! A lot of you have been waiting a long time for MDXv2. I’ve released experimental support in Storybook 6.5 and would love your help to kick the tires. I’ve written up a short guide here and will update it with the latest as it stabilizes:

https://gist.github.com/shilman/6ff2d7e18db8846e8fc552fb432ae4f6

shilman on Feb 28, 2022

Having this issue as well. Even the docs are wrong as they have newlines in them which result in a syntax error.

andrewplummer on Dec 4, 2021

You need MDX v2, which will only be available in storybook v7. I read in the latest @storybook/builder-vite release that MDX v2 is already supported with some manual setup procedure. So if you want to make the effort, you might get it working already.

bodograumann on Jun 30, 2022

Thanks @yairEO – I appreciate the kind words! 🙏

shilman on Mar 1, 2022

@AdrianGolda MDXv2 is in RC. hopefully we can get it incorporated soon!

shilman on Dec 15, 2021