Migrating from ArgsTable to ArgTypes not working as expected for React component

[rfgamaral]

Summary

I have the following .mdx file:

import { ArgsTable, Description, Meta, Title } from '@storybook/addon-docs'

import { TypistEditor } from '../../../../src'
import { MarkdownRenderer } from '../../../components/markdown-renderer.tsx'

import rawTypistEditor from './typist-editor.md?raw'

<Meta title="Documentation/Reference/Components/TypistEditor" />

<MarkdownRenderer markdown={rawTypistEditor} />

<ArgsTable of={TypistEditor} />

Which is currently being rendered as expected with Storybook v7 in this live demo. It renders something like this:

With the migration to Storybook v8, I replaced the ArgsTable with ArgTypes, and this is what I get:

There's a deployment PR preview available here.

What am I missing? How can I have the same output in Storybook v8 as the one I currently get with v7?

Additional information

Here's my main.ts configuration:

import { mergeConfig, UserConfig } from 'vite'

import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
    core: {
        disableTelemetry: true,
    },
    framework: {
        name: '@storybook/react-vite',
        options: {},
    },
    stories: [{ directory: '../stories' }],
    addons: [
        {
            name: '@storybook/addon-essentials',
            options: {
                configureJSX: true,
                babelOptions: {},
                sourceLoaderOptions: null,
                backgrounds: false,
                measure: false,
                outline: false,
                viewport: false,
            },
        },
        '@storybook/addon-a11y',
        'storybook-css-modules',
        './addons/expand-sidebar/register.js',
        './addons/hide-dark-logo/register.js',
    ],
    staticDirs: ['./public'],
    async viteFinal(config: UserConfig) {
        return mergeConfig(config, {
            build: {
                assetsDir: '.',
                sourcemap: false,
            },
        })
    },
}

export default config

Create a reproduction

No response

[valentinpalkovic]

One important change you might miss is that starting from Storybook 8.0, we use react-docgen by default to extract type information from your components. You can try out to fallback to the previous default for component analysis: react-docgen-typescript:

.storybook/main.ts|js
export default {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
};

I hope this fixes your issue.

[rfgamaral]

This worked, but when running Storybook, I started getting this warning:

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

Changing reactDocgen to react-docgen removes the warning, but regresses on the original problem.

I'm guessing react-docgen-typescript would need to be converted to an ESM module to get rid of the warning, but that project is currently unmaintained (ref). Or is there an alternative for me to get rid of the warning without worrying that things might break in the future?

[rfgamaral]

Actually, not sure what changed, but I can longer launch Storybook with react-docgen-typescript:

❯ npm run storybook:start                           

> @doist/typist@5.0.0 storybook:start
> storybook dev --port 6006 --ci

@storybook/cli v8.0.0

info => Serving static files from ././.storybook/public at /
info => Starting manager..
info => Starting preview..
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
info Using tsconfig paths for react-docgen
/home/Ricardo/Workspace/Doist/Frontend/typist/node_modules/@storybook/cli/bin/index.js:23
  throw error;
  ^

ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/Ricardo/Workspace/Doist/Frontend/typist/node_modules/react-docgen-typescript/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///home/Ricardo/Workspace/Doist/Frontend/typist/node_modules/react-docgen-typescript/lib/index.js:2:23
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)
    at async getUtils (/home/Ricardo/Workspace/Doist/Frontend/typist/node_modules/@joshwooding/vite-plugin-react-docgen-typescript/dist/index.cjs:21:18)

Node.js v20.11.1