storybookjs/storybook

[Bug]: Syntax highlighting breaks due to multiple version of mdx-js/react in Storybook v7 using `legacyMdx1`

Open

#26469 opened on Mar 13, 2024

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
block: sourcebughelp wantedmdx

Description

Describe the bug

First of all, thank you for this plugin. It simplifies a lot of issues with building a centralised component library.

I recently upgraded storybook to v7 and opted for the legacy mdx@1 version using mdx1-csf plugin as I wanted to first push the major updates on priority and want to avoid massive number of file changes when moving to mdx2.

This broke the syntax highlighting of code snippets. On digging further, I found out that mdx1-csf installs v1 version of mdx-js/react while @storybook/addon-docs v7 part of @storybook/addon-essentials is adding mdx-js/react v2 in the dependencies. Due to this conflicting version, the syntax highlighting seems to be breaking.

Is there a way to work around this without setting a module resolution?

To Reproduce

Upgrade storybook to v7 using the legacyMdx1 boolean set to true in ./storybook/main.js. Create a sample .stories.mdx file with code snippet added and run the dev server.

System

System:
    OS: macOS 14.3.1
    CPU: (12) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.17 - ~/node_modules/.bin/yarn <----- active
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 122.0.6261.129
    Safari: 17.3.1

Additional context

No response

Contributor guide

Tech stack
reacttypescriptnodejs
Domain
frontenddocumentation
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Storybook basicsNode.js and package managersReact and MDX
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate the dependency tree of a Storybook v7 project with legacyMdx1 enabled to identify conflicting versions of @mdx js/react. Look at the package.json resolutions or overrides to force a single version. Consider if the syntax highlighting break is due to mismatched plugin APIs. Review the Storybook repository's addon docs and mdx1 csf packages for dependency handling. Provide a pull request or workaround to align the versions.