search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.72k stars 9.32k forks source link

[Bug]: MDX files don't load with single back tick code blocks #29665

Closed IPWright83 closed 1 day ago

IPWright83 commented 3 days ago

Describe the bug

If you include a code block within an MDX file that uses just a single back tick, then this fails to render with the following error being thrown:

18:26:36 [vite] Internal server error: this.getData is not a function
@chart-io/react:storybook:   Plugin: storybook:mdx-plugin
@chart-io/react:storybook:   File: /home/ian/src/chart-io/packages/react/src/lib/components/Plots/Area/Area.mdx
@chart-io/react:storybook:       at Object.exitCodeText (/home/ian/src/chart-io/node_modules/.pnpm/mdast-util-gfm-table@1.0.7/node_modules/mdast-util-gfm-table/lib/index.js:76:12)
@chart-io/react:storybook:       at compile3 (/home/ian/src/chart-io/node_modules/.pnpm/@storybook+addon-docs@8.4.2_@types+react@18.3.12_storybook@8.4.2_prettier@2.8.8__webpack-sources@3.2.3/node_modules/@storybook/addon-docs/dist/preset.js:34:8463)
@chart-io/react:storybook:       at fromMarkdown (/home/ian/src/chart-io/node_modules/.pnpm/@storybook+addon-docs@8.4.2_@types+react@18.3.12_storybook@8.4.2_prettier@2.8.8__webpack-sources@3.2.3/node_modules/@storybook/addon-docs/dist/preset.js:34:4797)
@chart-io/react:storybook:       at parser (/home/ian/src/chart-io/node_modules/.pnpm/@storybook+addon-docs@8.4.2_@types+react@18.3.12_storybook@8.4.2_prettier@2.8.8__webpack-sources@3.2.3/node_modules/@storybook/addon-docs/dist/preset.js:34:20030)
@chart-io/react:storybook:       at Function.parse (/home/ian/src/chart-io/node_modules/.pnpm/@storybook+addon-docs@8.4.2_@types+react@18.3.12_storybook@8.4.2_prettier@2.8.8__webpack-sources@3.2.3/node_modules/@storybook/addon-docs/dist/preset.js:44:7663)
@chart-io/react:storybook:       at executor (/home/ian/src/chart-io/node_modules/.pnpm/@storybook+addon-docs@8.4.2_@types+react@18.3.12_storybook@8.4.2_prettier@2.8.8__webpack-sources@3.2.3/node_modules/@storybook/addon-docs/dist/preset.js:44:7981)
@chart-io/react:storybook:       at new Promise (<anonymous>)
@chart-io/react:storybook:       at Function.process (/home/ian/src/chart-io/node_modules/.pnpm/@storybook+addon-docs@8.4.2_@types+react@18.3.12_storybook@8.4.2_prettier@2.8.8__webpack-sources@3.2.3/node_modules/@storybook/addon-docs/dist/preset.js:44:7883)
@chart-io/react:storybook:       at compile (/home/ian/src/chart-io/node_modules/.pnpm/@storybook+addon-docs@8.4.2_@types+react@18.3.12_storybook@8.4.2_prettier@2.8.8__webpack-sources@3.2.3/node_modules/@storybook/addon-docs/dist/preset.js:53:6918)
@chart-io/react:storybook:       at compile2 (/home/ian/src/chart-io/node_modules/.pnpm/@storybook+addon-docs@8.4.2_@types+react@18.3.12_storybook@8.4.2_prettier@2.8.8__webpack-sources@3.2.3/node_modules/@storybook/addon-docs/dist/preset.js:53:7489)
@chart-io/react:storybook:       at TransformPluginContext.transform (/home/ian/src/chart-io/node_modules/.pnpm/@storybook+addon-docs@8.4.2_@types+react@18.3.12_storybook@8.4.2_prettier@2.8.8__webpack-sources@3.2.3/node_modules/@storybook/addon-docs/dist/preset.js:53:8300)
@chart-io/react:storybook:       at async PluginContainer.transform (file:///home/ian/src/chart-io/node_modules/.pnpm/vite@5.4.10_@types+node@18.19.64_terser@5.36.0/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49096:18)
@chart-io/react:storybook:       at async loadAndTransform (file:///home/ian/src/chart-io/node_modules/.pnpm/vite@5.4.10_@types+node@18.19.64_terser@5.36.0/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:51929:27)
@chart-io/react:storybook:       at async viteTransformMiddleware (file:///home/ian/src/chart-io/node_modules/.pnpm/vite@5.4.10_@types+node@18.19.64_terser@5.36.0/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:61881:24)

Converting to a triple back tick code block works fine, however doesn't allow mixing code blocks with other MDX content correctly to achieve something like this which was previously possible:

Image

Reproduction link

https://github.com/IPWright83/chart-io/tree/update-storybook

Reproduction steps

  1. Clone the above repository
  2. Checkout the update-storybook branch
  3. Install pnpm if not already present (alternatively cd packages/react; npm install; npm run storybook might work)
  4. pnpm install
  5. Run pnpm storybook:package
  6. Select @chart-io/react
  7. Open the Storybook that launches
  8. Open the Area Docs (corresponds to Area.mdx)

System

Storybook Environment Info:

  System:
    OS: Linux 6.8 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.19.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
    pnpm: 9.12.3 - ~/.nvm/versions/node/v18.19.0/bin/pnpm <----- active
  Browsers:
    Chrome: 128.0.6613.84
  npmPackages:
    chromatic: ^6.17.0 => 6.24.1

Additional context

Related to https://github.com/storybookjs/storybook/discussions/24682

Currently trying to actively upgrade Storybook to the latest version...

IPWright83 commented 1 day ago

Turns out the fix for this is to upgrade the remark-gfm package