[Bug]: "Source" and "Canvas" display only "type: code" after updating to v8

[endreujhelyi]

Describe the bug

After updating to Storybook v8, the code blocks under the canvas displays different code then previously when you click the "Show code" button.

Storybook 7

Storybook 8

I'm using CSF with 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} />

This issue occurs with every story where I use MDX. When there is a render function in the story object, it outputs the entire story object instead of displaying only the JSX output as it did previously.

Storybook 7

Storybook 8

Reproduction link

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

Reproduction steps

I was able to reproduce it partly.

• Comment out the Canvas block int the Button.mdx file and observe the different value rendered in the Canvas block.

System

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

Additional context

No response

[endreujhelyi]

Related to #22281

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

[endreujhelyi]

@shilman I'm trying to create a reproducible example but haven't succeeded yet. It seems to be related to our custom babel-config, which was removed from the Storybook webpack in v8. I'm currently trying to identify what might be causing this race condition.

[endreujhelyi]

@shilman I was able to reproduce a similar issue. In this example, the Source block displays different values depending on whether there is a Canvas present in the MDX file. When there is no Canvas, you can't override the type of the Source block.

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

In my case, I'm unable to display anything other than the "code" type both in the Canvas and the Source block, but I couldn't reproduce that fully yet.

[endreujhelyi]

related https://github.com/storybookjs/storybook/issues/21747

[endreujhelyi]

It might be related to issue #22922, as adding the @storybook/addon-storysource displays the same source code as the code block of the Canvas or the Source block itself, without allowing any override.