Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Props table not displaying in MDX but does JS #9977

Closed
NicolaSansom opened this issue Feb 27, 2020 · 4 comments
Closed

Props table not displaying in MDX but does JS #9977

NicolaSansom opened this issue Feb 27, 2020 · 4 comments

Comments

@NicolaSansom
Copy link

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
js

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>
);

mdx

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
Copy link

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

@lpoulter
Copy link

Also your js file may be overriding your MDX. Try

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

@shilman
Copy link
Member

shilman commented Feb 28, 2020

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

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

@NicolaSansom
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants