Getting React error when importing DesignTokenDocBlock

[hagealex]

Hello everyone!

I'm working on an Angular 17 library in combination with Storybook 7.

To display my design tokens I implemented this addon in the 3.0.0-beta.7 version: "storybook-design-token": "^3.0.0-beta.7",

The addons array in my main.ts file looks like this:

   addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-interactions',
        '@storybook/addon-a11y',
        'storybook-design-token',
    ],

I have created a story for my colors that looks like this:
colors.mdx:

import { Meta } from '@storybook/blocks';
import { DesignTokenDocBlock } from 'storybook-design-token';

<Meta title="Design Tokens/Colors" />

# Colors

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur qui ut
beatae nam molestiae cum doloremque fugit nihil, vitae modi recusandae culpa
odit facere eum vel reiciendis eius repellat, totam aperiam. Molestiae error
voluptatibus et neque vel libero, harum nam quibusdam mollitia, sapiente rerum
iste modi sit deserunt? Officiis, quaerat!

## Text Colors
<DesignTokenDocBlock categoryName="Text Colors" viewType="card" showSearch={false} />

## Background Colors
<DesignTokenDocBlock categoryName="Background Colors" viewType="card" showSearch={false} />

## Icon Colors
<DesignTokenDocBlock categoryName="Icon Colors" viewType="card" showSearch={false} />

## Border Colors
<DesignTokenDocBlock categoryName="Border Colors" viewType="card" showSearch={false} />

The story appears in the menu:

But when I open the story, this error occurs:

When I remove the DesignTokenDocBlock from my story the error disappears:
colors.mdx:

import { Meta } from '@storybook/blocks';

<Meta title="Design Tokens/Colors" />

# Colors

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur qui ut
beatae nam molestiae cum doloremque fugit nihil, vitae modi recusandae culpa
odit facere eum vel reiciendis eius repellat, totam aperiam. Molestiae error
voluptatibus et neque vel libero, harum nam quibusdam mollitia, sapiente rerum
iste modi sit deserunt? Officiis, quaerat!

So far I have no idea what might cause this error. The only thing that comes into my mind is this:

I have a projects folder in my project. In this folder lies my Angular library. And in this folder lies the main.ts file for Storybook:

As you can see, the addons are marked with a red underline. This is because ESLint give me a a warning, that these packages are not installed within the ui folder. I have a package.json file within the ui folder. But storybook and its addons are installed on the root level of my project, on the root package.json.

Might this cause the issue? Everythin else works as expected. Also every other addon works as expected.

[nacjacks]

Are there any updates on this? I am running into the same issue using Storybook 7 and Angular 15. I am also using storybook-design-token 2.10.0 because any 3 package I attempt to install requires Storybook 8.

[gleissonneves]

Have you installed storybook-design-token/types?

[bronzehedwick]

I have the same issue on Storybook 8, and am not using Typescript.