Storybook: Addon Docs not compiling MDX
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
```module.exports = {
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.stories.mdx
import { Meta, Story } from '@storybook/addon-docs/blocks';
import * as stories from './Button.stories.js';
import Button from '../components/Button';
My fav button
{stories.basic()}
**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.
matthewcm
All 34 comments
Seeing this on build also after the latest update.
JamesIves
on 22 Jan 2020
Not seeing this in our monorepo. Can somebody provide a public repro?
shilman
on 23 Jan 2020
@shilman https://github.com/UnitedIncome/components/tree/storybook-upgrade storybook-upgrade branch.
You'll see the error after running yarn install && yarn start.
JamesIves
on 23 Jan 2020
Facing the same issue
Here is a repo for reference
https://github.com/vivek12345/lounge-design-system
npm install
And
npm run storybook
vivek12345
on 25 Jan 2020
@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
on 25 Jan 2020
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.
atanasster
on 25 Jan 2020
@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.
vivek12345
on 25 Jan 2020
@vivek12345 ok. I will take a look at your repo
atanasster
on 25 Jan 2020
@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.
JamesIves
on 25 Jan 2020
@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.jsbefore, however I'm fine with moving tostories.jsif that's the solution, I'm not really sure why we went with.storyanyway.
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.
vivek12345
on 25 Jan 2020
@JamesIves Also the docs preset is not framework specific in the newer versions - addon-docs/preset instead of addon/docs/react/preset
atanasster
on 25 Jan 2020
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'
},
@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.
vivek12345
on 25 Jan 2020
@vivek12345 , sorry havent looked yet. Will post here
atanasster
on 25 Jan 2020
@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.
atanasster
on 26 Jan 2020
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
on 26 Jan 2020
Also I am wondering why did prettier not remove that whitespace?
vivek12345
on 26 Jan 2020
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
on 26 Jan 2020
Prettier - not sure, you have the vscode fix on save setting?
atanasster
on 26 Jan 2020
I do have it. For some reason it did not remove the whitespace in the mdx doc
vivek12345
on 26 Jan 2020
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
on 26 Jan 2020
@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
atanasster
on 26 Jan 2020
Thanks @atanasster :pray:
shilman
on 26 Jan 2020
@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.
JamesIves
on 26 Jan 2020
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.
matthewcm
on 27 Jan 2020
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
JamesIves
on 27 Jan 2020
@JamesIves - @storybook/addon-docs/react/preset was renamed to @storybook/addon-docs/preset
atanasster
on 27 Jan 2020
@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} />
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?
JamesIves
on 27 Jan 2020
@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.
atanasster
on 27 Jan 2020
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:
shilman
on 27 Jan 2020
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!
ocBruno
on 2 Feb 2020
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.
rralbritton
on 6 Mar 2020
Make sure Meta/other is free of any semicolons:
wrong!
<Meta title="Lab/CopyToClipboard" component={CopyToClipboard} />;
ok!
<Meta title="Lab/CopyToClipboard" component={CopyToClipboard} />
yyynnn
on 23 Jul 2020
Related issues
tlrobinson
路
3Comments
rpersaud
路
3Comments
zvictor
路
3Comments
alexanbj
路
3Comments
tomitrescak
路
3Comments
Most helpful comment
@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.