Addon-Docs: Newlines in HTML MDX <Story> gives compile error

[steel]

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

[JonKrone]

👍 , was just about to report this as well.

[Aaron-Pool]

Would you mind including the error output in the issue description?

[shilman]

Related: mdx-js/mdx#767

[threehams]

Here's an example and error message. Unfortunately, it's upstream like you noted in the link. I've hit it about a dozen different ways while trying to use MDX stories, as it's a significant-whitespace issue, and both prettier and my editor strip out trailing whitespace.

Example:

<div
  style={{
    display: "none",

  }}
/>

Error:

Error: Module build failed (from ./node_modules/@mdx-js/loader/index.js):
SyntaxError: unknown: Unexpected token (13:0)

  11 |   style={{
  12 |     display: "none",
> 13 | <p>{`}}
     | ^
  14 | />`}</p>
  15 |     </MDXLayout>
  16 |   )
    at Object.raise (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:7013:17)
    at Object.unexpected (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:8384:16)
    at Object.parseIdentifierName (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:10325:18)
    at Object.parseIdentifier (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:10303:23)
    at Object.parseMaybePrivateName (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:9666:19)
    at Object.parsePropertyName (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:10132:126)
    at Object.parseObjectMember (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:10033:10)
    at Object.parseObj (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:9963:25)
    at Object.parseExprAtom (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:9582:28)
    at Object.parseExprAtom (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:4116:20)
    at Object.parseExprSubscripts (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:9219:23)
    at Object.parseMaybeUnary (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:9199:21)
    at Object.parseExprOps (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:9067:23)
    at Object.parseMaybeConditional (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:9040:23)
    at Object.parseMaybeAssign (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:9000:21)
    at Object.parseExpression (/Users/dedmondson/workspace/abp-frontend/node_modules/@mdx-js/mdx/node_modules/@babel/parser/lib/index.js:8950:23)
    at Object../docs/batteryPack/components/Card.stories.mdx (http://localhost:6006/main.897a2dc7f906e0f97ca2.bundle.js:3584:7)
    at __webpack_require__ (http://localhost:6006/runtime~main.897a2dc7f906e0f97ca2.bundle.js:786:30)
    at fn (http://localhost:6006/runtime~main.897a2dc7f906e0f97ca2.bundle.js:151:20)
    at webpackContext (http://localhost:6006/main.897a2dc7f906e0f97ca2.bundle.js:2139:9)
    at http://localhost:6006/vendors~main.897a2dc7f906e0f97ca2.bundle.js:78645:31
    at Array.forEach (<anonymous>)
    at http://localhost:6006/vendors~main.897a2dc7f906e0f97ca2.bundle.js:78644:22
    at Array.forEach (<anonymous>)
    at http://localhost:6006/vendors~main.897a2dc7f906e0f97ca2.bundle.js:78643:14
    at render (http://localhost:6006/vendors~main.897a2dc7f906e0f97ca2.bundle.js:42795:13)

[dellfort]

why was tis issue removed from 5.3.x milestone? and why is it not in the next milestone?

[shilman]

@dellfort this issue was remove from 5.3.x because we're done with 5.3 except for high priority security fixes.

Time to upgrade to 6.0: npx sb upgrade. Full migration guide

We're waiting for MDX 2.0, which will hopefully fix a bunch of issues on that side of things.

[yairEO]

Reporting it's been almost over a year (since last comment) and this bug is still occurring

I've just spent some time not understand why my simple MDX story broke:

<Canvas>
 <Story name="Warning" args={{ title: 'Lorem ipsum dolor', children: 'Lorem ipsum dolor' }}>
   {Template.bind({})}
 </Story>

 <Story name="Error" args={{ children: 'Lorem ipsum dolor' }}>
   {Template.bind({})}
 </Story>
 
 <Story name="Success" args={{ children: 'Lorem ipsum dolor' }}>
   {Template.bind({})}
 </Story>
</Canvas>

It was caused from the new lines between each <Story>, inside the <Canvas>

[shilman]

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

[mrmartineau]

Can you confirm if this issue affects whitespace in code blocks as well? e.g.

const foo = 'hello'

const bar = 1

[ghost]

@shilman MDX 2.0 is in an rc stage now. Are you waiting until it is stable?

[shilman]

@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:

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

[andrewplummer]

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

[shilman]

@andrewplummer Which example code is failing for you?

[andrewplummer]

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>

[AdrianGolda]

6.4.9 still this issue. When I add new lines in the jsx block scope I get syntax error. I am new to storybook and I spent whole day trying to figure out what I am doing wrong until I realized that every space and new line matters. It is very frustrating. Is there a way I can fix it before MDX 2.0 is ready?

[shilman]

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

[shilman]

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

[yairEO]

Hi @shilman, I was reading in another place where you wrote that Storybook v7 will be released next month with MDXv2 support so I was just waiting for it to ship... is that information correct?

[shilman]

@yairEO where did you read that? SB6.5 will be released next month. SB7 release date is TBD.

[yairEO]

@shilman - I don't remember where i've read this... sorry. was about ~2 weeks ago.

Anyway I really admire your hard work here and obvious dedication and positive attitude and want to thank you deeply, as a devoted Storybook user for many years.

[shilman]

Thanks @yairEO -- I appreciate the kind words! 🙏

[anhdd-kuro]

Does this issue resolved ?
I'm using 6.5.9 and this issue still occur

[bodograumann]

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.

[anhdd-kuro]

Oh I see , thanks you
I think I will live with this issue for now or use tsx instead

[shilman]

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