Props table not displaying in MDX but does JS

[NicolaSansom]

Describe the bug
I have components that have props & defaultProps defined within them but I am unable to get the props table showing when using MDX but can when writing stories in JS.

Expected behavior
I expect the Props table to show up in the same way it does when creating the stories within JS

Actual Behavior
Component docs is missing the Props table.

Screenshots

import React from 'react';
import { storiesOf } from '@storybook/react';

import AnimatedInput from './index';

export default {
  component: AnimatedInput,
  title: 'AnimatedInput in JS',
};

export const Default = () => (
  <div>
    <AnimatedInput placeholder="hello" />
  </div>
);

import { Story, Preview } from "@storybook/addon-docs/blocks";
import AnimatedInput from './index';

# AnimatedInput in MDX

<Meta
  title='AnimatedInput in MDX'
  component={AnimatedInput}
/>

<Preview>
  <Story name="default">
    <AnimatedInput placeholder="hello" />
  </Story>
</Preview>

## Props table
<Props of={AnimatedInput} />

Webpack config

const path = require('path');
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
const nodeExternals = require('webpack-node-externals');

module.exports = async ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(stories|story)\.mdx$/,
    use: [
      {
        loader: 'babel-loader',
        // may or may not need this line depending on your app's setup
        options: {
          babelrc: false,
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: [
            '@babel/plugin-proposal-class-properties',
            '@babel/plugin-proposal-object-rest-spread',
            '@babel/plugin-proposal-optional-chaining',
            '@babel/plugin-proposal-nullish-coalescing-operator',
            '@babel/plugin-transform-flow-strip-types',
            '@babel/plugin-transform-react-display-name',
            '@babel/plugin-transform-runtime',
            '@babel/plugin-transform-strict-mode',
            '@babel/plugin-transform-regenerator',
            'lodash',
            [
              require.resolve('babel-plugin-module-resolver'),
              {
                alias: {
                  common: '../common',
                },
              },
            ],
            'babel-plugin-idx',
            'react-docgen',
          ],
          cacheDirectory: false,
        },
      },
      {
        loader: '@mdx-js/loader',
        options: {
          compilers: [createCompiler({})],
        },
      },
    ],
  });

  config.module.rules.push({
    test: /\.(stories|story)\.[tj]sx?$/,
    loader: require.resolve('@storybook/source-loader'),
    exclude: [/node_modules/],
    enforce: 'pre',
  });

  config.module.rules.push({
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    options: {
      babelrc: false,
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-proposal-optional-chaining',
        '@babel/plugin-proposal-nullish-coalescing-operator',
        '@babel/plugin-transform-flow-strip-types',
        '@babel/plugin-transform-react-display-name',
        '@babel/plugin-transform-runtime',
        '@babel/plugin-transform-strict-mode',
        '@babel/plugin-transform-regenerator',
        'lodash',
        [
          require.resolve('babel-plugin-module-resolver'),
          {
            alias: {
              common: '../common',
            },
          },
        ],
        'babel-plugin-idx',
        'react-docgen',
      ],
      cacheDirectory: false,
    },
  });

  target: 'node';
  externals: [nodeExternals()];
  return config;
};

I can try to give more details if needed.

[lpoulter]

Looks like you need to import Props from "@storybook/addon-docs/blocks";

[lpoulter]

Also your js file may be overriding your MDX. Try

export default {
  component: AnimatedInput,
  title: 'AnimatedInput in JS',
  includeStories: [],
};

[shilman]

Definitely the lack of Props import @lpoulter. Great catch! 💯

Wonder if there's a way to make MDX more strict about that... 🤔

[NicolaSansom]

That was it! Seems so obvious now. Thanks @lpoulter