Addon Docs not compiling MDX #9598

matthewcm · 2020-01-22T16:55:51Z

Describe the bug
Addon Docs is not compiling MDX

Module build failed (from ./node_modules/@mdx-js/loader/index.js):
SyntaxError: Unexpected character '#' (3:0)
at Object.raise

main.js

  stories: ['../src/**/*.stories.(js|mdx)'],
  addons: [
    '@storybook/preset-create-react-app',
  '@storybook/addon-actions/register',
  '@storybook/addon-links/register',
  '@storybook/addon-knobs/register',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null,
      },
    },
  ]
};

Button.stories.js

import React from 'react'
import {action} from '@storybook/addon-actions'
import Button from '../components/Button'

export default {
	title: 'Button',
}

export const Primary = () => <Button onClick={action('clicked')}>Hello Button</Button>
export const Rec = () => <Button onClick={action('clicked')}>Hello Button</Button>

Button.stories.mdx

import { Meta, Story } from '@storybook/addon-docs/blocks';
import * as stories from './Button.stories.js';
import Button from '../components/Button';

<Meta title="MDX/Button" component={Button} />
 
# My fav button
 
<Story name="Button Storyyy">
    {stories.basic()}
</Story>
  
<Button />

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
  Binaries:
    Node: 12.6.0 - /usr/local/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-actions: 5.3 => 5.3.8
    @storybook/addon-docs: 5.3 => 5.3.8
    @storybook/addon-knobs: 5.3 => 5.3.8
    @storybook/addon-links: 5.3 => 5.3.8
    @storybook/addon-storyshots: 5.3 => 5.3.8
    @storybook/addons: 5.3 => 5.3.8
    @storybook/preset-create-react-app: ^1.5.2 => 1.5.2
    @storybook/react: 5.3 => 5.3.8
    @storybook/theming: 5.3 => 5.3.8

Additional context
The Docs tab on each component is working. However this error comes as soon as I add an MDX file.

The text was updated successfully, but these errors were encountered:

JamesIves · 2020-01-22T18:35:59Z

Seeing this on build also after the latest update.

shilman · 2020-01-23T01:36:48Z

Not seeing this in our monorepo. Can somebody provide a public repro?

JamesIves · 2020-01-23T16:10:52Z

@shilman https://github.com/UnitedIncome/components/tree/storybook-upgrade storybook-upgrade branch.

You'll see the error after running yarn install && yarn start.

vivek12345 · 2020-01-25T04:23:22Z

Facing the same issue
Here is a repo for reference
https://github.com/vivek12345/lounge-design-system

npm install
And
npm run storybook

atanasster · 2020-01-25T17:25:30Z

@JamesIves - do you have mdx-loader, I believe by default the docs preset only uses the mdx-loader for .stories.mdx

{
    test: /\.mdx$/,
   use: ['babel-loader', '@mdx-js/loader'],
},

atanasster · 2020-01-25T17:27:22Z

overall, this error should happen because the mdx-loader is not applied - either a webpack configuration file that is not found by storybook (wrong name?) or the name of the mdx files does not comply with the docs preset filter.

vivek12345 · 2020-01-25T17:28:30Z

@atanasster I have tried both ways. One by adding the preset and one adding webpack config that matches for .mdx file and mdx loader but still the same issue.
My stories are of the format .stories.mdx yet the preset is unable to parse the mdx file.

atanasster · 2020-01-25T17:31:48Z

@vivek12345 ok. I will take a look at your repo

JamesIves · 2020-01-25T17:39:44Z

@JamesIves - do you have mdx-loader, I believe by default the docs preset only uses the mdx-loader for .stories.mdx
{
    test: /\.mdx$/,
   use: ['babel-loader', '@mdx-js/loader'],
},

It seemed to work for .story.js before, however I'm fine with moving to stories.js if that's the solution, I'm not really sure why we went with .story anyway.

vivek12345 · 2020-01-25T17:41:11Z

@JamesIves - do you have mdx-loader, I believe by default the docs preset only uses the mdx-loader for .stories.mdx
{
    test: /\.mdx$/,
   use: ['babel-loader', '@mdx-js/loader'],
},
It seemed to work for .story.js before, however I'm fine with moving to stories.js if that's the solution, I'm not really sure why we went with .story anyway.

By default the preset looks for .stories.mdx file but it's fine to keep the .story.js as is

It seems like the issue is something else. I have the presets and .stories.mdx too yet my mdx parsing fails.

atanasster · 2020-01-25T17:42:07Z

@JamesIves Also the docs preset is not framework specific in the newer versions - addon-docs/preset instead of addon/docs/react/preset

vivek12345 · 2020-01-25T19:38:44Z

Here is my webpack config which I get when I did yarn storybook --debug-webpack

{
        test: /\.(stories|story).mdx$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: '/Users/vnayyar/vivek/lounge-design-system/node_modules/.cache/storybook',
              presets: [
                [
                  '/Users/vnayyar/vivek/lounge-design-system/node_modules/@babel/preset-env/lib/index.js',
                  {
                    shippedProposals: true,
                    useBuiltIns: 'usage',
                    corejs: '3'
                  }
                ],
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/@babel/preset-react/lib/index.js',
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/@babel/preset-flow/lib/index.js'
              ],
              plugins: [
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/@storybook/core/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/@storybook/core/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                [
                  '/Users/vnayyar/vivek/lounge-design-system/node_modules/@storybook/core/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
                  { sourceMap: true, autoLabel: true }
                ],
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/babel-plugin-macros/dist/index.js',
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/@babel/plugin-transform-react-constant-elements/lib/index.js',
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/babel-plugin-add-react-displayname/index.js',
                [
                  '/Users/vnayyar/vivek/lounge-design-system/node_modules/babel-plugin-react-docgen/lib/index.js',
                  {
                    DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
                  }
                ]
              ]
            }
          },
          {
            loader: '@mdx-js/loader',
            options: {
              compilers: [ [Function: compiler] ],
              remarkPlugins: [ [Function: slug], [Function: externalLinks] ]
            }
          }
        ]
      },
      {
        test: /\.mdx$/,
        exclude: /\.(stories|story).mdx$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: '/Users/vnayyar/vivek/lounge-design-system/node_modules/.cache/storybook',
              presets: [
                [
                  '/Users/vnayyar/vivek/lounge-design-system/node_modules/@babel/preset-env/lib/index.js',
                  {
                    shippedProposals: true,
                    useBuiltIns: 'usage',
                    corejs: '3'
                  }
                ],
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/@babel/preset-react/lib/index.js',
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/@babel/preset-flow/lib/index.js'
              ],
              plugins: [
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/@storybook/core/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/@storybook/core/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                [
                  '/Users/vnayyar/vivek/lounge-design-system/node_modules/@storybook/core/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
                  { sourceMap: true, autoLabel: true }
                ],
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/babel-plugin-macros/dist/index.js',
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/@babel/plugin-transform-react-constant-elements/lib/index.js',
                '/Users/vnayyar/vivek/lounge-design-system/node_modules/babel-plugin-add-react-displayname/index.js',
                [
                  '/Users/vnayyar/vivek/lounge-design-system/node_modules/babel-plugin-react-docgen/lib/index.js',
                  {
                    DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
                  }
                ]
              ]
            }
          },
          {
            loader: '@mdx-js/loader',
            options: {
              remarkPlugins: [ [Function: slug], [Function: externalLinks] ]
            }
          }
        ]
      },
      {
        test: /\.(stories|story)\.[tj]sx?$/,
        loader: '/Users/vnayyar/vivek/lounge-design-system/node_modules/@storybook/source-loader/dist/server/index.js',
        options: { inspectLocalDependencies: true },
        enforce: 'pre'
      },

vivek12345 · 2020-01-25T20:27:45Z

@atanasster did you get a chance to look into the repo and can you point me in a direction so that I can get it working.

atanasster · 2020-01-25T21:56:42Z

@vivek12345 , sorry havent looked yet. Will post here

atanasster · 2020-01-25T23:24:27Z

@vivek12345 - it was the dreaded mdx-js empty space bug.

In your mdx story - you have an empty space on an empty line - basically you have to remove any white specs from empty line. Lots of fun ....

I took the opportunity to also upgrade your project to the new storybook config files.

vivek12345 · 2020-01-25T23:47:24Z

Oh damn that was a crazy bug. Thank you so much @atanasster. Wondering is it documented somewhere that the empty space causes an issue for mdx-js?

vivek12345 · 2020-01-25T23:50:02Z

Also I am wondering why did prettier not remove that whitespace?

atanasster · 2020-01-25T23:51:26Z

Glad to see you unstuck @vivek12345

Not sure if its documented on storybook site. I had filed an issue about it couple of months ago on the mdx-js site.

atanasster · 2020-01-25T23:52:27Z

Prettier - not sure, you have the vscode fix on save setting?

vivek12345 · 2020-01-25T23:53:37Z

I do have it. For some reason it did not remove the whitespace in the mdx doc

atanasster · 2020-01-26T05:22:19Z

Cool - one down, a few more to go :)
@matthewcm - can you please also try removing empty spaces from your mdx stories and confirm if this was the initial problem.

atanasster · 2020-01-26T05:58:33Z

@JamesIves - same for you, can you please try both the config above and also remove empty spaces and let-us know.

Sorry, Its a really annoying issue, just want to make sure what you guys are facing here

shilman · 2020-01-26T14:08:26Z

Thanks @atanasster 🙏

JamesIves · 2020-01-26T19:24:37Z

@JamesIves - same for you, can you please try both the config above and also remove empty spaces and let-us know.

Sorry, Its a really annoying issue, just want to make sure what you guys are facing here

Will do! I'll report back Monday when I'm in the office.

matthewcm · 2020-01-27T07:52:27Z

Cool - one down, a few more to go :)
@matthewcm - can you please also try removing empty spaces from your mdx stories and confirm if this was the initial problem.

Yup I think that fixed it too. I rewrote all my stories and that seemed to fix it. Thanks for the help everyone.

JamesIves · 2020-01-27T15:19:18Z

I've added the mdx-loader, but I'm now seeing the following

On build:

WARN   Failed to load preset: {"name":"@storybook/addon-docs/react/preset","options":{"configureJSX":true,"babelOptions":{},"sourceLoaderOptions":null}}
ERR! TypeError: Invalid attempt to spread non-iterable instance

After build in the story preview:

Unexpected default export without title: undefined

Is there some issue with how our mdx files are setup that doesn't play nicely with this new version? https://github.com/UnitedIncome/components/tree/storybook-upgrade/components/organisms-complex/BoxSelectCard

atanasster · 2020-01-27T15:40:59Z

@JamesIves - @storybook/addon-docs/react/preset was renamed to @storybook/addon-docs/preset

atanasster · 2020-01-27T15:42:45Z

@JamesIves also make sure to addd a <Meta /> tag to each mdx story:

import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { Checkbox } from './Checkbox';
 
<Meta title="MDX/Checkbox" component={Checkbox} />

JamesIves · 2020-01-27T15:49:04Z

Tried changing the reference in the presets.js file and I still get this error.

The Meta tag was left off purposely as our stories are defined in their respective .story.js file instead, we're only using them for docs, last time I attached a Meta tag to the story it created a duplicated entry. Is this not a supported workflow anymore?

https://github.com/UnitedIncome/components/blob/storybook-upgrade/components/organisms-complex/BoxSelectCard/BoxSelectCard.story.js#L16-L20

atanasster · 2020-01-27T16:05:51Z

@JamesIves - nothing comes to my mind off the top of my head.
Can you check in your latest configs, I will try to take a look at your repo later today.

shilman · 2020-01-27T16:32:33Z

We probably need to update the recipe based on what we learn from your use case.

@JamesIves you are correct: only use Meta in .stories.mdx files.

The primary difference between .stories.mdx and .mdx files is that the former can be used to define stories, whereas the latter can only be used to reference them, since it's not running through our Storybook MDX compiler.

The other key difference is that that the compiler adds snippet of wrapper code around the MDX content:

https://github.com/storybookjs/storybook/blob/next/addons/docs/src/mdx/mdx-compiler-plugin.js#L204-L207

It's possible that you're using a doc block that relies either mdxStoryNameToKey or mdxComponentMeta from the context, which would fail in this case.

NOTE: I also see some whitespace in your .mdx file, which I would expect might cause problems:

https://github.com/UnitedIncome/components/blob/storybook-upgrade/components/organisms-complex/BoxSelectCard/BoxSelectCard.mdx#L56-L58

ocBruno · 2020-02-02T02:06:03Z

Thank you @atanasster ! I was also having issues with the Unexpected token syntax error on line 1 and fixed it by removing line breaks if anyone didn't find any empty spaces and is still having trouble!

rralbritton · 2020-03-06T19:53:27Z

Trimming all white spaces worked for me as well. For those of you that use VS Code, there is a setting to do this for you. In Preferences > Settings search for : Trim Trailing Whitespace and make sure its checked.

yyynnn · 2020-07-23T16:21:26Z

Make sure Meta/other is free of any semicolons:

wrong!
<Meta title="Lab/CopyToClipboard" component={CopyToClipboard} />;

ok!
<Meta title="Lab/CopyToClipboard" component={CopyToClipboard} />

Ch-sriram · 2022-08-25T10:09:53Z

Also make sure that no self-closing component is left unclosed

incorrect!
export const Template = (props) => <SomeComponent {...props} >;

correct!
export const Template = (props) => <SomeComponent {...props} />;

shilman added bug mdx needs reproduction high priority labels Jan 23, 2020

shilman added this to the 5.3.x milestone Jan 23, 2020

shilman removed the needs reproduction label Jan 23, 2020

matthewcm closed this as completed Jan 27, 2020

daniel-norris mentioned this issue Jul 4, 2020

Module build failed with MDX files: Unexpected token #9996

Closed

cliedelt mentioned this issue Dec 15, 2021

Addon-docs: Multiple Tab #8951

Closed

Addon Docs not compiling MDX #9598

Addon Docs not compiling MDX #9598

Comments

matthewcm commented Jan 22, 2020 • edited Loading

JamesIves commented Jan 22, 2020

shilman commented Jan 23, 2020

JamesIves commented Jan 23, 2020 • edited Loading

vivek12345 commented Jan 25, 2020 • edited Loading

atanasster commented Jan 25, 2020

atanasster commented Jan 25, 2020

vivek12345 commented Jan 25, 2020

atanasster commented Jan 25, 2020

JamesIves commented Jan 25, 2020

vivek12345 commented Jan 25, 2020 • edited Loading

atanasster commented Jan 25, 2020

vivek12345 commented Jan 25, 2020

vivek12345 commented Jan 25, 2020 • edited Loading

atanasster commented Jan 25, 2020

atanasster commented Jan 25, 2020

vivek12345 commented Jan 25, 2020

vivek12345 commented Jan 25, 2020

atanasster commented Jan 25, 2020

atanasster commented Jan 25, 2020

vivek12345 commented Jan 25, 2020

atanasster commented Jan 26, 2020

atanasster commented Jan 26, 2020

shilman commented Jan 26, 2020

JamesIves commented Jan 26, 2020

matthewcm commented Jan 27, 2020

JamesIves commented Jan 27, 2020 • edited Loading

atanasster commented Jan 27, 2020

atanasster commented Jan 27, 2020

JamesIves commented Jan 27, 2020

atanasster commented Jan 27, 2020

shilman commented Jan 27, 2020

ocBruno commented Feb 2, 2020

rralbritton commented Mar 6, 2020

yyynnn commented Jul 23, 2020 • edited Loading

Ch-sriram commented Aug 25, 2022

matthewcm commented Jan 22, 2020 •

edited

Loading

JamesIves commented Jan 23, 2020 •

edited

Loading

vivek12345 commented Jan 25, 2020 •

edited

Loading

vivek12345 commented Jan 25, 2020 •

edited

Loading

vivek12345 commented Jan 25, 2020 •

edited

Loading

JamesIves commented Jan 27, 2020 •

edited

Loading

yyynnn commented Jul 23, 2020 •

edited

Loading