[Bug]: Multi-line codeblocks not working in MDX files

[IPWright83]

Describe the bug

Using multi-line code blocks within an MDX file (by way of 3 back ticks) does not format correctly as code. So the following:

This is some
code

Would not look correct. This is in an existing repository with Storybook that has been upgraded. If I downgrade to Storybook 7.2.0 then everything works as expected. The output looks as follows

7.4.0 -> 7.5.2

7.2.0 (and below)

To Reproduce

I have been unable to create a small standalone example despite several attempts. This seems to be work fine in a brand new project with Storybook. If I copy over all the configuration from main.ts and match the same dependencies however it still appears broken in my project.

Therefore the easiest reproduction at the moment is:

git clone https://github.com/IPWright83/chart-io
git checkout upgrade-storybook

Manually update the /packages/react/package.json Storybook which can be done using a find and replace on "7.2.0" to "7.5.2".

pnpm install
pnpm storybook

Then open http://localhost:6006/?path=/docs/getting-started--docs in a browser. You will see the incorrectly rendered code block.

System

Storybook Environment Info:

  System:
    OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.2.0 - ~/.nvm/versions/node/v20.2.0/bin/node
    Yarn: 1.22.11 - /usr/bin/yarn
    npm: 9.6.6 - ~/.nvm/versions/node/v20.2.0/bin/npm
    pnpm: 8.10.2 - ~/.local/share/pnpm/pnpm <----- active
  Browsers:
    Chrome: 119.0.6045.105
  npmPackages:
    chromatic: ^6.17.0 => 6.24.1 

### Additional context

This problem was introduced between versions `7.2.0` and `7.4.0` (unfortunately `7.3.0` doesn't load for me so I can't test). 

[BrotaOne]

I also have the problem, run the following command to reproduce

1. using vite to initialize a react project
2. initialize storybook by execute pnpm dlx storybook@latest init
3. add a file named 'Button.mdx' in stories

import {Meta} from '@storybook/blocks';

<Meta title="Button" />

\`\`\`
console.log(123);
\`\`\`

[pedaars]

@BrotaOne Can you try adding js after the first 3 backticks i have done this below

console.log(123;

[IPWright83]

I've tried adding jsx after the backticks @pedaars and that didn't help me

[pedaars]

hmm thats strange so i have this in my mdx file

which outputs this in storybook

[BrotaOne]

thats strange so i have this in my mdx file

it doesn't work for me

[floroz]

Confirming this bug when upgrading from 7.2.0 to 7.5.3.

EDIT: This bug only happens when running Storybook in dev mode, building for deployment and loading it from the /storybook-static/ does not present this issue.

7.2.0

7.5.3

[shilman]

I have not been able to reproduce based on any of the comments above. Does anybody have a minimal reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

[IPWright83]

@shilman I've been unable to reproduce in a small standalone project, but this affects my upgraded project (reproduction included in the original issue - if that doesn't work let me know). I don't understand what the differences are between my project and a small attempt at reproducing unfortunately.

As @floroz mentioned, it seems to only affect development mode.

[shilman]

@IPWright83 Can you check your repro steps again? I don't remember what error I ran into but in believe the branch you mention no longer exists. Happy to give it another try--seems to be affecting various projects and would be good to get to the bottom of it

[floroz]

@shilman I can confirm the same issue as @IPWright83 .

I tried to put together a repro but could not reproduce it. However, on my project (large-sized Vue component library) the issue persists.

I am going to share the settings from my project in the hope it can help with the debugging:

• Storybook v7.5.3
• main.ts file below

import type { StorybookConfig } from "@storybook/vue3-vite";
import { mergeConfig } from "vite";
const config: StorybookConfig = {
  stories: [
    "../src/**/*.mdx",
    "../docs/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-a11y",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-mdx-gfm",
    "@etchteam/storybook-addon-status",
  ],
  core: {
    disableTelemetry: true,
  },
  framework: {
    name: "@storybook/vue3-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  staticDirs: ["./assets"],
  typescript: {
    check: false,
  },
  async viteFinal(viteConfig) {
    return mergeConfig(viteConfig, {
      define: {
        "process.env": {},
      },
    });
  },
};
export default config;

[IPWright83]

Sorry @shilman - not sure how I managed to remove the branch. I've added a new branch with a reproduction here https://github.com/IPWright83/chart-io/tree/upgrade-storybook

[viliusmileris]

I had "@mdx-js/react" in my devDependencies, and it turned out to be causing issues with rendering code blocks in MDX. The issue was resolved by removing "@mdx-js/react".

[github-actions[bot]]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions[bot]]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.

[IPWright83]

Can this be re-opened? A reproduction was provided....