Cannot anchor to headings in MDX documentation #18395

gyfchong · 2022-06-03T06:34:01Z

Describe the bug
When appending the ID of a heading to the URL ie. storybook.com#story-heading the page does not anchor down to the target heading.

Additionally, previously each heading had the ability to click an icon to create a link to the heading, this is now gone. Any manual links also do not work.

To Reproduce
Repo
Deploy

System
OS: macOS 12.4
CPU: (8) arm64 Apple M1 Pro
Binaries:
Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
Yarn: 3.2.1 - ~/.nvm/versions/node/v16.13.2/bin/yarn
npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
Browsers:
Chrome: 102.0.5005.61
Firefox: 100.0.2
Safari: 15.5
npmPackages:
@storybook/addon-actions: ^6.5.6 => 6.5.6
@storybook/addon-docs: ^6.5.6 => 6.5.6
@storybook/addon-essentials: ^6.5.6 => 6.5.6
@storybook/addon-interactions: ^6.5.6 => 6.5.6
@storybook/addon-links: ^6.5.6 => 6.5.6
@storybook/builder-webpack5: ^6.5.6 => 6.5.6
@storybook/manager-webpack5: ^6.5.6 => 6.5.6
@storybook/node-logger: ^6.5.6 => 6.5.6
@storybook/preset-create-react-app: ^4.1.2 => 4.1.2
@storybook/react: ^6.5.6 => 6.5.6
@storybook/testing-library: ^0.0.11 => 0.0.11

luchn49 · 2022-06-08T02:21:37Z

I've been running into the same issue. There's no longer an icon when trying to hover over the headers.

You can see it: https://storybookjs.netlify.app/official-storybook/?path=/story/addons-docs-markdown-docs--page.

Not sure if that issue is from storybook or MDX?

gyfchong · 2022-06-08T02:55:51Z

Not sure if that issue is from storybook or MDX?

Yeah not sure either, seems it only affects MDX type docs, and not the auto generated one from Storybook.

hecspc · 2022-06-08T15:48:53Z

Same here in v6.5.4. It looks the MDX render doesnt include the id in the heading elements.

This issue makes also plugins to include TOCs (like storybbok-docs-toc) unusable.

javier-zabala-lenio · 2022-06-09T15:30:10Z

Found the same issue in v6.5.7.

sag1v · 2022-07-11T06:02:10Z

Can confirm the issue is still there on v6.5.9.

As @gyfchong mentioned in this comment

... seems it only affects MDX type docs, and not the auto generated one from Storybook

I'm also experiencing the same behavior

binh710 · 2022-07-13T06:48:14Z

Hey all, does anyone know which version of SB should I downgrade to to avoid this first? We need to release our SB to production this week.

sag1v · 2022-07-19T07:02:02Z

@shilman Is this being investigated by the team? I think its quite a critical issue because documentations without a way to share links is pretty poor experience.
A similar issue was resolved not so long ago BTW.

references
#17134
#17080

binh710 · 2022-07-19T07:51:35Z

Hey all, does anyone know which version of SB should I downgrade to to avoid this first? We need to release our SB to production this week.

We have to downgrade SB back to 6.4.19 for now as our project rely heavily on mdx docs. Hopefully this get fix soon. :)

Cheers guys, thanks for maintaining SB! It's an awesome product <3

yannbf · 2022-07-19T10:32:40Z

Hey everyone, sorry you're experiencing this issue! Took me some time but I finally found the culprit.
I'll discuss with the team and see what's the best way to bring a fix to this, so hang tight and we'll have something ready soon!

shilman · 2022-07-25T12:49:40Z

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.16 containing PR #18740 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

sag1v · 2022-07-25T13:27:23Z

@shilman Thanks 😊
Does this fix only apply for the v7 alpha release? We have the same issue on v6 as well (not sure if it's related to the mdx2 feature)

ggascoigne · 2022-07-25T20:27:02Z

I know it's a big request, but is there any chance of getting this fix backported to v6, it looks like v7 is a bit of a ways away still so it's not clear that that is a viable solution right now.

gyfchong · 2022-08-10T06:59:25Z

Bumped to v6.5.10 and added the span, but Storybook ToC still won't work, seems they scan the MDX title id's for their anchors.

Have tried manually adding the # to the URL to anchor down but also doesn't work. Not sure what else to try.

yannbf · 2022-08-10T07:12:54Z

Hey @gyfchong thanks for the update. As mentioned in the comment which closed this issue, the fix was added to Storybook 7.0 alpha. I don't think it's been ported back to 6.5, which must be the reason it didn't work for you. @shilman do you think we can patch this back?

gyfchong · 2022-08-10T07:14:45Z

Hey @gyfchong thanks for the update. As mentioned in the comment which closed this issue, the fix was added to Storybook 7.0 alpha. I don't think it's been ported back to 6.5, which must be the reason it didn't work for you. @shilman do you think we can patch this back?

Ah I misunderstood the merged branch, I thought that was for storybook, but it was someone else's repo! 😅

lazysergey · 2022-08-10T11:25:26Z

@yannbf could we have this patch in v6 as well? as 7.0.0 is not released yet

@binh710 could you advice on how to downgrade please?
I tried to change versions in package.json manually with yarn install --force

but seems I have to downgrade babel-loader as well? having this error:

WARN Force closed preview build
ERR! TypeError: (0 , _coreCommon.getStorybookBabelConfig) is not a function

also I've tried npx storybook@6.4.19 init and yarn storybook@6.4.19 --automigrate without luck

thanks in advance 👍

DzmVasileusky · 2022-09-28T10:57:22Z

I am also thinking that essential bug fixes should be included into current stable version not a future one

sag1v · 2022-09-28T11:47:43Z

I totally agree. Maybe @shilman can reconsider?

shilman · 2022-09-28T12:27:51Z

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.13-alpha.0 containing PR #18740 that references this issue. Upgrade today to the @prerelease NPM tag to try it out!

npx sb upgrade --prerelease

sag1v · 2022-09-29T13:51:35Z

Awesome @shilman thanks! 🙏 Do you want us to test this before you release the next official 6.x.x version?

Edit

~~I did test it with `@storybook/react@6.5.13-alpha.0` and unfortunately its still not working. When i hover over the headers i still don't see the anchor button and there is no `id` for the elements.~~

Edit2
Sorry for the mixup, but it turns out i forgot to upgrade ALL of storybook's deps to 6.5.13-alpha.0. Once i did that it seems to work fine. 💪 🙂

lazysergey · 2022-09-30T19:41:05Z

@sag1v how do you upgrade it to exact version? npx sb upgrade --prerelease command actually installed 7.0.0-alpha.34 for me:

sag1v · 2022-09-30T19:47:33Z

@sag1v how do you upgrade it to exact version? npx sb upgrade --prerelease command actually installed 7.0.0-alpha.34 for me:

Yeah I know its a shame 😞 i had to manually upgrade each package. That's why it didn't work out at first because i forgot to upgrade some packages.

lazysergey · 2022-09-30T20:21:40Z

@sag1v tyvm, resolved for me, hope this will go live soon 🤞

what I did:
I've changed version manually and did yarn install:

If for someone this version still doesn't work, I would check the following:

confirm that preset.js has PR #18740 change:
Check which id do you get in mdx.js where storybook decides if it should render Header or HeaderWithOcticonAnchor:
For me it still gives id: undefined for mdx documents that import *.md, but it finally works fine for mdx 🎉 🎉 🎉

That's how I debugged, hope this could help someone :)

sag1v · 2022-10-23T06:39:05Z

@shilman Hey 👋
When do we expect to see version 6.5.13 released?

shilman · 2022-10-23T06:41:30Z

@sag1v sorry this fell off my radar. I want to get one more thing patched back to 6.5 in the next day or two and then will release. Thanks for your patience!

sag1v · 2022-10-23T06:43:41Z

@shilman Thanks!
Just heads-up, it turns out that npx sb upgrade --prerelease is installing version 7.x and not 6.x. Is there away to pass a major version or is it a bug that needs to get fixed?

shilman · 2022-10-23T06:45:55Z

We're going to change upgrade to allow you to specify an npm tag. For now it's just the way it works:

upgrade = latest stable
upgrade --prerelease = latest prerelease

shilman · 2022-10-24T04:09:17Z

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.13 containing PR #18740 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

Christo44 · 2023-04-20T15:44:00Z

Does not work. Page does not move if clicking on same page anchors. https://storybookjs.netlify.app/official-storybook/?path=/story/addons-docs-markdown-docs--page
Storybook 6.5.16

😢

gyfchong added bug needs triage labels Jun 3, 2022

shilman added the mdx label Jun 9, 2022

shilman added this to the 6.5 stabilization milestone Jun 9, 2022

shilman added linear and removed needs triage labels Jun 9, 2022

yannbf mentioned this issue Jul 19, 2022

Addon docs: Pass remarks plugins to mdx loader #18740

Merged

3 tasks

shilman closed this as completed Jul 25, 2022

stephiescastle mentioned this issue Aug 5, 2022

Bump Storybook to v6.5.10 and add workaround for heading anchors nasa-jpl/explorer-1#285

Merged

17 tasks

Lukas742 mentioned this issue Aug 10, 2022

docs(Storybook): implement workaround for anchors SAP/ui5-webcomponents-react#3357

Merged

tjsilver mentioned this issue Dec 6, 2022

Move source to csnx guardian/csnx#279

Open

2 tasks

QuintonJason mentioned this issue Feb 24, 2023

[DSS-340] add table of contents sidebar Kajabi/pine#25

Closed

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot anchor to headings in MDX documentation #18395

Cannot anchor to headings in MDX documentation #18395

gyfchong commented Jun 3, 2022

luchn49 commented Jun 8, 2022 •

edited

gyfchong commented Jun 8, 2022

hecspc commented Jun 8, 2022 •

edited

javier-zabala-lenio commented Jun 9, 2022

sag1v commented Jul 11, 2022

binh710 commented Jul 13, 2022

sag1v commented Jul 19, 2022

binh710 commented Jul 19, 2022

yannbf commented Jul 19, 2022

shilman commented Jul 25, 2022

sag1v commented Jul 25, 2022

ggascoigne commented Jul 25, 2022

gyfchong commented Aug 10, 2022

yannbf commented Aug 10, 2022

gyfchong commented Aug 10, 2022

lazysergey commented Aug 10, 2022

DzmVasileusky commented Sep 28, 2022

sag1v commented Sep 28, 2022

shilman commented Sep 28, 2022

sag1v commented Sep 29, 2022 •

edited

lazysergey commented Sep 30, 2022 •

edited

sag1v commented Sep 30, 2022

lazysergey commented Sep 30, 2022 •

edited

sag1v commented Oct 23, 2022

shilman commented Oct 23, 2022

sag1v commented Oct 23, 2022

shilman commented Oct 23, 2022

shilman commented Oct 24, 2022

Christo44 commented Apr 20, 2023

Cannot anchor to headings in MDX documentation #18395

Cannot anchor to headings in MDX documentation #18395

Comments

gyfchong commented Jun 3, 2022

luchn49 commented Jun 8, 2022 • edited

gyfchong commented Jun 8, 2022

hecspc commented Jun 8, 2022 • edited

javier-zabala-lenio commented Jun 9, 2022

sag1v commented Jul 11, 2022

binh710 commented Jul 13, 2022

sag1v commented Jul 19, 2022

binh710 commented Jul 19, 2022

yannbf commented Jul 19, 2022

shilman commented Jul 25, 2022

sag1v commented Jul 25, 2022

ggascoigne commented Jul 25, 2022

gyfchong commented Aug 10, 2022

yannbf commented Aug 10, 2022

gyfchong commented Aug 10, 2022

lazysergey commented Aug 10, 2022

DzmVasileusky commented Sep 28, 2022

sag1v commented Sep 28, 2022

shilman commented Sep 28, 2022

sag1v commented Sep 29, 2022 • edited

lazysergey commented Sep 30, 2022 • edited

sag1v commented Sep 30, 2022

lazysergey commented Sep 30, 2022 • edited

If for someone this version still doesn't work, I would check the following:

sag1v commented Oct 23, 2022

shilman commented Oct 23, 2022

sag1v commented Oct 23, 2022

shilman commented Oct 23, 2022

shilman commented Oct 24, 2022

Christo44 commented Apr 20, 2023

luchn49 commented Jun 8, 2022 •

edited

hecspc commented Jun 8, 2022 •

edited

sag1v commented Sep 29, 2022 •

edited

lazysergey commented Sep 30, 2022 •

edited

lazysergey commented Sep 30, 2022 •

edited