MDX - Storybook + React + Typescript

Question

I try to use MDX markup in building live docs for my storybook. When I run the storybook I get this error:

Module build failed (from ./node_modules/babel-loader/lib/index.js):

SyntaxError: C:/Users/User/Desktop/priority-style-react/src/stories/Button1.stories.mdx: Unexpected token (12:9)

  10 | const makeShortcode = name => function MDXDefaultShortcode(props) {
  11 |   console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
> 12 |   return <div {...props}/>
     |          ^
  13 | };
  14 | const Preview = makeShortcode("Preview");
  15 | const layoutProps = {

my webpack config to load .mdx is:

config.module.rules.push({
    test: /\.mdx?$/,
    use: [{loader: "babel-loader"}, {loader: '@mdx-js/loader'}],
    exclude: /node_modules/,
    include: [/src/]
});

storybook config.js:

import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';

import '../style/index.scss';

const req = require.context('../src/stories', true, /.stories.(tsx|mdx)/);

addDecorator(withKnobs);
configure(req, module);

looks like loader works incorrectly. Can anyone help me to understand what I missed?

Answer 1

Okay there is something very silly in MDX files

It does not accept blank lines as we speak.

const makeShortcode = name => function MDXDefaultShortcode(props) {
console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
return <div {...props}/>
 // remove this blank line here.
};

to

const makeShortcode = name => function MDXDefaultShortcode(props) {
console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
return <div {...props}/>
};

And it should work as i scratched my head around this for hours.