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]

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 #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!

[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="As a tag">Component</LinkTo> works without errors.

[isellsoap]

@unematiii True, 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.

[tklives]

Hello y'all!

I'm still running into this on v6.2.7 and am wondering if there is any timeline on resolution for allowing you to only supply a kind to a <LinkTo>, or if I shouldn't wait for that and instead just go add the story attribute to all of my links to sidestep those errors?

Thanks!

[devintyler]

This is still an issue on 6.3.4.

(As mentioned above) without a story prop an error is thrown in the console. The main issue is the sanitizing function, which expects a string to be passed in. If story was optional and the sanitize function wasn't called when it doesn't exist this would go away.

[shilman]

@devintyler any chance you can create a PR with those changes?

[unematiii]

@shilman The routine in question is part of CSF. I've submitted a PR quite some time ago.

[shilman]

@unematiii thanks for bringing it to my attention! Will discuss with @tmeasday and figure out the right way forward. 🙏

[blowsie]

Is there a solution for Vue + MDX?

[blowsie]

Is there a solution for Vue + MDX?

Importing the react component worked just fine

[TheColorRed]

I still cannot get this working in MDX addon-links v6.5.12 so I just created my own component with the linkTo function.

import { linkTo } from '@storybook/addon-links';
import React from 'react';

export class Link extends React.Component {
  constructor(props) {
    super(props);
    this.title = props.title;
    this.story = props.story;
    this.children = props.children;
  }

  render() {
    let style = { color: 'rgb(30, 167, 253)', textDecoration: 'none', cursor: 'pointer' };
    return (
      <a style={style} onClick={linkTo(this.title, this.story)}>
        {this.children}
      </a>
    );
  }
}

Usage in MDX:

import { Link } from './mdx';

<Link title="Story Title" story="Story">Go to Story</Link>

[ndelangen]

I'm fairly sure this is no longer a problem in Storybook 7.0 beta. If someone could verify this, and report if it's still an issue?
A reproduction would be useful. 🙏