Storybook: Addons-links with MDX

[ok2ju]

Hello, I tried to use addon-links with MDX (addon-docs) and I wondered why story property of LinkTo (from react package) is required? I have several doc pages without Story at all and I want to navigate such pages using LinkTo. Btw, it works but annoying error drops in the console.

Cannot read property 'toLowerCase' of null

The error comes from sanitize method of storybookjs/csf package. hrefTo method trying to generate url but fails when calling method toId

Expected behavior
There are no errors in the console.

Code snippets

<LinkTo kind="MyDoc" />

[shilman]

Parent issue #6700

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[blaine-stripe]

I also ran into this while investigating https://github.com/storybookjs/storybook/issues/11590 - is there a workaround for now?

[ndelangen]

edited a mdx story:

but it's not showing up:

[ndelangen]

I'm not sure if this was ever intended to work..

[blaine-stripe]

@ndelangen Hmm, it works in the code I'm looking at. Maybe it is because you have text on the same line? Can you try it with the LinkTo on it's own line?

[elektronik2k5]

I didn't check what happens when LinkTo is on it's own line, but can definitely confirm the issue when it isn't, cause all of our links are inline and the bug is consistently reproducible.

[ndelangen]

This seems to work:

import LinkTo from '@storybook/addon-links/react';

<Meta title="About/Intro" />

# Official-storybook

Welcome to `official-storybook`, a collection of test cases and demos for `@storybook/react` and all its addons.

Should be a link here >>> <LinkTo kind="test" story="index">Go to index</LinkTo> <<< Should be a link here

[blaine-stripe]

Yeah, but if you have a "kind" without a "story", the component throws because of some internals.

[ndelangen]

aha

[ndelangen]

This is fixed in 6.0.0

I verified using:

import LinkTo from '@storybook/addon-links/react';

<Meta title="About/Intro" />

# Official-storybook

Welcome to `official-storybook`, a collection of test cases and demos for `@storybook/react` and all its addons.

Should be a link here >>> <LinkTo kind="Core/Args">Go to index</LinkTo> <<< Should be a link here

[isellsoap]

I’m still getting the error. I’m on the freshly released 6.0.0 version.

[shilman]

Do you have a repro?

[isellsoap]

@shilman Thanks for the follow-up! I created a minimal reproduction case: https://github.com/isellsoap/storybook-issue-10846

Visiting the "Introduction" story triggers the error in the browser console.

[ndelangen]

Thanks for the repro, hopefully we'll be able to take a look quickly!

[isellsoap]

As far as I know this is still an issue.

[shilman]

@isellsoap I think it should be <LinkTo kind="Example/Button">. Does that work?

[isellsoap]

@shilman I just tried it, using "Example/Button" produces the same error in the console.

[unematiii]

I'm also getting the same error, however when I also specify story, the error vanishes.

<LinkTo kind="base/atoms/misc/Component">Component</LinkTo>, works, but produces error.
<LinkTo kind="base/atoms/misc/Component" story="as-a-tag">Component</LinkTo> or ,<LinkTo kind="base/atoms/misc/Component" story="Asatag">Component</LinkTo> works without errors.

[isellsoap]

@unematiii True, the the errors don’t appear with story="as-a-tag". But the links themselves don’t work after applying the attribute. Do the links take you to the destination when clicking on them?

[unematiii]

@isellsoap Yeah, it works for me.

package.json:

"@storybook/addon-links": ">=6.0.25",

SomeComponent.stories.mdx:

import LinkTo from '@storybook/addon-links/react';

Uses <LinkTo kind="base/atoms/misc/Component" story="as-a-tag">Component</LinkTo> to provide corresponding slots.

base/atoms/misc/Component/Component.stories.mdx:

## As `a` tag

<Story name="As `a` tag">{Template.bind({})}</Story>

[empressmoon]

hi, I'm having the same issue:
I need to add links between docs in storybook, like so:

<LinkTo kind="Docs/Getting started">Getting started</LinkTo>

Links work fine, but I'm still getting the console error:

Anyone can help?

[unematiii]

I think this needs to have name argument as optional. But then again, I'm not entirely sure if this makes sense for CSF.

Edit: This project would really benefit having strictNullChecks turned on for TS. I'm looking at the LinkTo impl. and while Props define both kind and story as string, defaultProps have both set to null.

[empressmoon]

thanks @unematiii :) Looking at this I got rid of the problem by adding story="page" to the LinkTo:

<LinkTo kind="Docs/Getting started" story="page">Getting started</LinkTo>

It's maybe a bit hacky but it works for now.

[unematiii]

@empressmoon Hmm, well it works without errors if you add a story, bot produces an error without this. If you don't have a story named page, the link doesn't work at all. Not sure if this is a workaround.