@storybook/addon-docs preset not working

[yisheng90]

Describe the bug
I was following the installation guide on here. But got the error below:

I tried the manual configuration as well. But it does not work as well.

To Reproduce
Steps to reproduce the behavior:

1. Go to here
2. Clone the repo
3. yarn install
4. run yarn storybook

Expected behavior
Expected to see storybook to load correctly.

Code snippets
If applicable, add code samples to help explain your problem.

presets.js

module.exports = [
  {
    name: '@storybook/addon-docs',
    options: {
      configureJSX: true,
      sourceLoaderOptions: null
    }
  },
  { name: '@storybook/preset-typescript' }
];

System:
Environment Info:

System:
OS: macOS 10.15.4
CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
Binaries:
Node: 13.11.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.13.7 - /usr/local/bin/npm
Browsers:
Chrome: 80.0.3987.149
Safari: 13.1
npmPackages:
@storybook/addon-docs: ^5.3.17 => 5.3.17
@storybook/addon-links: ^5.3.17 => 5.3.17
@storybook/addon-storysource: ^5.3.17 => 5.3.17
@storybook/addons: ^5.3.17 => 5.3.17
@storybook/cli: ^5.3.17 => 5.3.17
@storybook/preset-typescript: ^3.0.0 => 3.0.0
@storybook/react: ^5.3.17 => 5.3.17

[shilman]

Got it working by the following steps:

1. Add a /preset to the end of addon-docs (needed in .storybook/preset.js, not needed in main.js)
2. Reorder preset-typescript and addon-docs
3. Fix syntax error in MDX file (remove trailing ;)

Final .storybook/preset.js:

module.exports = [
  { name: "@storybook/preset-typescript" },
  {
    name: "@storybook/addon-docs/preset",
    options: {
      configureJSX: true,
      sourceLoaderOptions: null
    }
  }
];

Final Button.stories.mdx

import { Meta } from "@storybook/addon-docs/blocks";

import { Button } from "./Button";

<Meta title="MDX/Button" component={Button} />

[yisheng90]

@shilman

It works. Thank you so much for taking your time to look at my issue.