StoryBook CSF No Code Available Reproduce

addons.ts

// Storybook v5.2.7

import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-viewport/register';
import '@storybook/addon-storysource/register';
import '@storybook/addon-docs/register';
import '@storybook/addon-a11y/register';

button.stories.tsx

import React, { FunctionComponent } from 'react';
import { text } from '@storybook/addon-knobs';

import { Button } from './button';

export default { title: 'Genesis|Button', component: Button };

export const withText: FunctionComponent = () => <Button>Hello Button</Button>;

export const withEmoji: FunctionComponent = () => (
  <Button>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

export const withKnobs: FunctionComponent = () => (
  <Button>{text('children', 'Test Children')}</Button>
);

button.tsx

import React, { ReactNode, FunctionComponentElement } from 'react';

export type Props = {
  /**
   * Children
   */
  children?: ReactNode;
};

export function Button({ children }: Props): FunctionComponentElement<Props> {
  return <button type="button">{children}</button>;
}

export default Button;

config.ts

// Core(s)
import { configure, addDecorator, addParameters } from '@storybook/react';
// Addon(s)
import { withA11y } from '@storybook/addon-a11y';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';

// Custom(s)
import theme from './theme';

// Decorator(s)
addDecorator(withA11y);
addDecorator(withKnobs);

// Parameter(s)
addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage
  },
  options: {
    theme
  }
});

// Autoloader
function loaderFn(): __WebpackModuleApi.RequireContext[] {
  // Place your first order story here.
  const allExports: Set<__WebpackModuleApi.RequireContext> = new Set([
    require('../src/introduction.stories.mdx')
  ]);
  const requireContext = require.context(
    '../src',
    true,
    /\.stories\.(tsx?|mdx)$/
  );
  requireContext
    .keys()
    .forEach(fileName => allExports.add(requireContext(fileName)));
  return [...allExports];
}

// Summary
configure(loaderFn, module);

webpack-debug

Manager webpack config
{
  name: 'manager',
  mode: 'development',
  bail: false,
  devtool: 'none',
  entry: [
    '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/server/common/polyfills.js',
    '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/.storybook/addons.ts',
    '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/client/manager/index.js'
  ],
  output: {
    path: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/public',
    filename: '[name].[chunkhash].bundle.js',
    publicPath: ''
  },
  cache: {},
  plugins: [
    DllReferencePlugin {
      options: {
        context: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/node_modules',
        manifest: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dll/storybook_ui-manifest.json'
      }
    },
    HtmlWebpackPlugin {
      options: {
        template: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/server/templates/index.ejs',
        templateContent: false,
        templateParameters: [Function: templateParameters],
        filename: 'index.html',
        hash: false,
        inject: false,
        compile: true,
        favicon: false,
        minify: 'auto',
        cache: true,
        showErrors: true,
        chunks: 'all',
        excludeChunks: [],
        chunksSortMode: 'none',
        meta: {},
        base: false,
        title: 'Webpack App',
        xhtml: false,
        alwaysWriteToDisk: true
      },
      childCompilerHash: undefined,
      childCompilationOutputName: undefined,
      assetJson: undefined,
      hash: undefined,
      version: 4
    },
    CaseSensitivePathsPlugin {
      options: {},
      pathCache: {},
      fsOperations: 0,
      primed: false
    },
    DefinePlugin { definitions: {} },
    DefinePlugin {
      definitions: {
        'process.env': {
          NODE_ENV: '"development"',
          NODE_PATH: '""',
          PUBLIC_URL: '""'
        },
        NODE_ENV: '"development"'
      }
    },
    ContextReplacementPlugin {
      resourceRegExp: /graphql-language-service-interface[/\\]dist/,
      newContentResource: undefined,
      newContentRecursive: undefined,
      newContentRegExp: /\.js$/
    },
    NormalModuleReplacementPlugin {
      resourceRegExp: /core-js/,
      newResource: [Function]
    }
  ],
  module: {
    rules: [
      {
        test: /\.(mjs|jsx?)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/node_modules/.cache/storybook',
              presets: [
                [
                  '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/preset-env/lib/index.js',
                  {
                    shippedProposals: true,
                    useBuiltIns: 'usage',
                    corejs: '3'
                  }
                ],
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/preset-react/lib/index.js',
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/preset-flow/lib/index.js'
              ],
              plugins: [
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                [
                  '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
                  { sourceMap: true, autoLabel: true }
                ],
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-macros/dist/index.js',
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-transform-react-constant-elements/lib/index.js',
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-add-react-displayname/index.js',
                [
                  '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-react-docgen/lib/index.js',
                  {
                    DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
                  }
                ]
              ]
            }
          }
        ],
        include: [
          '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui'
        ],
        exclude: [
          '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/node_modules'
        ]
      },
      {
        test: /\.css$/,
        use: [
          '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/style-loader/index.js',
          {
            loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/css-loader/dist/cjs.js',
            options: { importLoaders: 1 }
          }
        ]
      },
      {
        test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
        loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/file-loader/dist/cjs.js',
        query: { name: 'static/media/[name].[hash:8].[ext]' }
      },
      {
        test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
        loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/url-loader/dist/cjs.js',
        query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
      }
    ]
  },
  resolve: {
    extensions: [ '.mjs', '.js', '.jsx', '.json' ],
    modules: [ 'node_modules' ],
    alias: {
      '@emotion/core': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@emotion/core',
      '@emotion/styled': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@emotion/styled',
      'emotion-theming': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/emotion-theming',
      '@storybook/addons': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/addons',
      '@storybook/api': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/api',
      '@storybook/channels': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/channels',
      '@storybook/components': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/components',
      '@storybook/core-events': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core-events',
      '@storybook/router': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/router',
      '@storybook/theming': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/theming',
      '@storybook/ui': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/ui',
      'prop-types': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/prop-types',
      react: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/react',
      'react-dom': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/react-dom'
    }
  },
  recordsPath: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/node_modules/.cache/storybook/records.json',
  performance: { hints: false },
  optimization: { splitChunks: { chunks: 'all' }, runtimeChunk: true }
}
Preview webpack config
{
  mode: 'development',
  bail: false,
  devtool: '#cheap-module-source-map',
  entry: [
    '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/server/common/polyfills.js',
    '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/server/preview/globals.js',
    '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/.storybook/config.ts',
    '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true'
  ],
  output: {
    path: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/public',
    filename: '[name].[hash].bundle.js',
    publicPath: ''
  },
  plugins: [
    HtmlWebpackPlugin {
      options: {
        template: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/core/dist/server/templates/index.ejs',
        templateContent: false,
        templateParameters: [Function: templateParameters],
        filename: 'iframe.html',
        hash: false,
        inject: false,
        compile: true,
        favicon: false,
        minify: 'auto',
        cache: true,
        showErrors: true,
        chunks: 'all',
        excludeChunks: [],
        chunksSortMode: 'none',
        meta: {},
        base: false,
        title: 'Webpack App',
        xhtml: false,
        alwaysWriteToDisk: true
      },
      childCompilerHash: undefined,
      childCompilationOutputName: undefined,
      assetJson: undefined,
      hash: undefined,
      version: 4
    },
    DefinePlugin {
      definitions: {
        'process.env': {
          NODE_ENV: '"development"',
          NODE_PATH: '""',
          PUBLIC_URL: '"."'
        },
        NODE_ENV: '"development"'
      }
    },
    WatchMissingNodeModulesPlugin {
      nodeModulesPath: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/node_modules'
    },
    HotModuleReplacementPlugin {
      options: {},
      multiStep: undefined,
      fullBuildTimeout: 200,
      requestTimeout: 10000
    },
    CaseSensitivePathsPlugin {
      options: {},
      pathCache: {},
      fsOperations: 0,
      primed: false
    },
    ProgressPlugin {
      profile: false,
      handler: undefined,
      modulesCount: 500,
      showEntries: false,
      showModules: true,
      showActiveModules: true
    },
    DefinePlugin { definitions: {} },
    NormalModuleReplacementPlugin {
      resourceRegExp: /core-js/,
      newResource: [Function]
    }
  ],
  module: {
    rules: [
      {
        test: /\.(mjs|jsx?)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/node_modules/.cache/storybook',
              presets: [
                [
                  '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/preset-env/lib/index.js',
                  {
                    shippedProposals: true,
                    useBuiltIns: 'usage',
                    corejs: '3'
                  }
                ],
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/preset-react/lib/index.js',
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/preset-flow/lib/index.js'
              ],
              plugins: [
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                [
                  '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
                  { sourceMap: true, autoLabel: true }
                ],
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-macros/dist/index.js',
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@babel/plugin-transform-react-constant-elements/lib/index.js',
                '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-add-react-displayname/index.js',
                [
                  '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-plugin-react-docgen/lib/index.js',
                  {
                    DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
                  }
                ]
              ]
            }
          }
        ],
        include: [
          '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui'
        ],
        exclude: [
          '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui/node_modules'
        ]
      },
      {
        test: /\.md$/,
        use: [
          {
            loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/raw-loader/dist/cjs.js'
          }
        ]
      },
      {
        test: /\.css$/,
        sideEffects: true,
        use: [
          '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/style-loader/index.js',
          {
            loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/css-loader/dist/cjs.js',
            options: { importLoaders: 1 }
          },
          {
            loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/postcss-loader/src/index.js',
            options: {
              ident: 'postcss',
              postcss: {},
              plugins: [Function: plugins]
            }
          }
        ]
      },
      {
        test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
        loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/file-loader/dist/cjs.js',
        query: { name: 'static/media/[name].[hash:8].[ext]' }
      },
      {
        test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
        loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/url-loader/dist/cjs.js',
        query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
      },
      {
        test: /\.stories\.mdx$/,
        use: [
          {
            loader: 'babel-loader',
            options: { plugins: [ '@babel/plugin-transform-react-jsx' ] }
          },
          {
            loader: '@mdx-js/loader',
            options: { compilers: [ [Function: compiler] ] }
          }
        ]
      },
      {
        test: /\.stories\.tsx?$/,
        use: [
          {
            loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/@storybook/source-loader/dist/server/index.js',
            options: {
              parser: 'typescript',
              prettierConfig: {
                arrowParens: 'avoid',
                printWidth: 80,
                tabWidth: 2,
                bracketSpacing: true,
                trailingComma: 'none',
                singleQuote: true,
                semi: true,
                jsxBracketSameLine: false
              }
            }
          }
        ],
        enforce: 'pre'
      },
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-loader/lib/index.js',
            options: {
              presets: [
                [
                  '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/babel-preset-react-app/index.js',
                  { flow: false, typescript: true }
                ]
              ]
            }
          },
          {
            loader: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/react-docgen-typescript-loader/dist/index.js',
            options: {
              tsconfigPath: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/tsconfig.json'
            }
          }
        ]
      },
      {
        test: /\.s[ac]ss$/,
        use: [ 'style-loader', 'css-loader', 'sass-loader' ],
        include: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/packages/web-ui'
      }
    ]
  },
  resolve: {
    extensions: [ '.mjs', '.js', '.jsx', '.json', '.ts', '.tsx' ],
    modules: [ 'node_modules' ],
    alias: {
      'babel-runtime/core-js/object/assign': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/core-js/es/object/assign.js',
      react: '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/react',
      'react-dom': '/home/jeffryangtoni/sources/personal/gitlab/zuckerberg/web/node_modules/react-dom'
    }
  },
  optimization: {
    splitChunks: { chunks: 'all' },
    runtimeChunk: true,
    minimizer: [
      TerserPlugin {
        options: {
          test: /\.m?js(\?.*)?$/i,
          chunkFilter: [Function: chunkFilter],
          warningsFilter: [Function: warningsFilter],
          extractComments: false,
          sourceMap: true,
          cache: true,
          cacheKeys: [Function: cacheKeys],
          parallel: true,
          include: undefined,
          exclude: undefined,
          minify: undefined,
          terserOptions: {
            output: { comments: /^\**!|@preserve|@license|@cc_on/i },
            mangle: false,
            keep_fnames: true
          }
        }
      }
    ]
  },
  performance: { hints: false }
}

webpack.config.js

// Core(s)
const path = require('path');
const createMDXCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');

// Summary
module.exports = async ({ config }) => {
  config.module.rules.push(
    {
      test: /\.stories\.mdx$/,
      use: [
        {
          loader: 'babel-loader',
          // May or may not need this line depending on your app's setup
          options: {
            plugins: ['@babel/plugin-transform-react-jsx']
          }
        },
        {
          loader: '@mdx-js/loader',
          options: {
            compilers: [createMDXCompiler({})]
          }
        }
      ]
    },
    {
      test: /\.stories\.tsx?$/,
      use: [
        {
          loader: require.resolve('@storybook/source-loader'),
          options: {
            parser: 'typescript',
            prettierConfig: {
              arrowParens: 'avoid',
              printWidth: 80,
              tabWidth: 2,
              bracketSpacing: true,
              trailingComma: 'none',
              singleQuote: true,
              semi: true,
              jsxBracketSameLine: false
            }
          }
        }
      ],
      enforce: 'pre',
      include: path.resolve(__dirname, '../src')
    },
    {
      test: /\.tsx?$/,
      use: [
        {
          loader: require.resolve('babel-loader'),
          options: {
            presets: [
              [
                require.resolve('babel-preset-react-app'),
                { flow: false, typescript: true }
              ]
            ]
          }
        },
        require.resolve('react-docgen-typescript-loader')
      ]
    },
    {
      test: /\.s[ac]ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../')
    }
  );

  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

Hi. Did you ever get this working? If so, would you be willing to update this gist?