Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: markdown headings in MDX are broken (no html anchors) #20519

Closed
Powerplex opened this issue Jan 6, 2023 · 5 comments · Fixed by #21796
Closed

[Bug]: markdown headings in MDX are broken (no html anchors) #20519

Powerplex opened this issue Jan 6, 2023 · 5 comments · Fixed by #21796

Comments

@Powerplex
Copy link

Powerplex commented Jan 6, 2023

Describe the bug

Using Storybook with @storybook/react-vite with @storybook/addon-essentials, I can't seem to get anchors to work in MDX files.

Hovering them simply does not display the icon, and my links pointing to anchors does not work. I see no ids on the headings when I inspect the HTML.

This is a big issue for me, developers should be able to share urls to a specific section of a page.

broken-anchors-mdx

To Reproduce

Here is a file where anchors are not working: https://github.com/Powerplex/vite-storybook-poc/blob/master/src/stories/docs/WritingStories.mdx

You can clone the repo and use this branch to reproduce: 
- `npm i`
- `npm run start` (Will open storybook in your browser)
- Open the `Contributing/Writing Stories` Docs from the interface.

I think this previous fix was supposed to take care of it but I still have the bug

System

Environment Info:

  System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.11.0 - ~/.nvm/versions/node/v18.11.0/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v18.11.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 107.0
    Safari: 15.2
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.19 => 7.0.0-beta.19
    @storybook/addon-interactions: ^7.0.0-beta.19 => 7.0.0-beta.19
    @storybook/addon-links: ^7.0.0-beta.19 => 7.0.0-beta.19
    @storybook/blocks: ^7.0.0-beta.19 => 7.0.0-beta.19
    @storybook/react: ^7.0.0-beta.19 => 7.0.0-beta.19
    @storybook/react-vite: ^7.0.0-beta.19 => 7.0.0-beta.19
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1
@Paul-Hebert
Copy link

FWIW I'm also seeing this when using 6.5.13 (Preact)

    "@storybook/addon-actions": "^6.5.13",
    "@storybook/addon-essentials": "^6.5.13",
    "@storybook/addon-interactions": "^6.5.13",
    "@storybook/addon-links": "^6.5.13",
    "@storybook/builder-vite": "^0.2.5",
    "@storybook/preact": "^6.5.13",
    "@storybook/testing-library": "^0.0.13",

@Rockstar79
Copy link

I'm running into this issue as well.

"@storybook/addon-essentials": "^6.5.15",
"@storybook/builder-vite": "^0.3.0",
"@storybook/core-common": "^6.5.15",
"@storybook/core-server": "^6.5.15",
"@storybook/web-components": "^6.5.15",

@shilman
Copy link
Member

shilman commented Mar 22, 2023

If anybody is still seeing this on 7.0, do you a have a reproduction repo you can share? Thank you! 🙏

@shilman
Copy link
Member

shilman commented Mar 29, 2023

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-rc.10 containing PR #21796 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

@Powerplex
Copy link
Author

@shilman it works like a charm :D Thank you very much.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

5 participants