storybook [Bug]:在更新到v8版本后，"Source"和"Canvas"仅显示"type: code",

bmp9r5qi 于 6个月前发布在其他

关注(0)|答案(6)|浏览(48)

描述问题

在更新到Storybook v8后，当你点击"显示代码"按钮时，画布下的代码块显示的代码与之前不同。

Storybook 7

Storybook 8

我正在使用CSF和MDX。

// toggle.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { Toggle } from './toggle';

const meta: Meta<typeof Toggle> = {
    component: Toggle,
    title: 'Inputs/Toggle',
    args: {
        'data-test-id': 'toggle',
        isChecked: true,
        isDisabled: false,
        size: 'medium',
    },
};

export default meta;
type Story = StoryObj<typeof Toggle>;

export const Basic: Story = {};

{/* toggle.mdx */}

import { Canvas, Meta } from '@storybook/blocks';
import * as ToggleStories from './toggle.stories';

<Meta of={ToggleStories} />

<Canvas of={ToggleStories.Basic} />

这个问题出现在我使用MDX的每个故事中。当故事对象中有 render 函数时，它会输出整个故事对象，而不是像以前那样只显示JSX输出。

Storybook 7

Storybook 8

复现链接

https://stackblitz.com/edit/github-cyjyvh?file=src%2Fstories%2FButton.mdx

复现步骤

我部分地复现了这个问题。

注解掉Button.mdx文件中的 Canvas 代码块，观察 Canvas 代码块中渲染的不同值。

系统

System:
    OS: Windows 10 10.0.19045
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900
  Binaries:
    Node: 21.1.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 4.3.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD <----- active
    npm: 10.2.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 126.0.6478.57
    Edge: Chromium (125.0.2535.92)
  npmPackages:
    eslint-plugin-storybook: 0.8.0 => 0.8.0