Can't use @storybook/addon-designs with NEXTjs 13

[TsengTofu]

Affected design types

• [X] figma
• [X] figspec
• [ ] link
• [ ] image
• [ ] iframe

Describe the bug

Packages manage tool: pnpm With React Framework: NEXT.js version: next: ^13.4.3 Storybook version: storybook: ^7.5.3 Use this addons: @storybook/addon-designs/ version: storybook-addon-designs: ^6.3.1

I've followed the docs: But still not get the expect result, all I got is:

1. In terminal => pnpm storybook
2. Go to the local link to check the result
3. See this:

How to reproduce the bug?

I've followed the docs: But still not get the expect result, all I got is:

1. Create a NEXT.js project and install storybook
2. Choose any component to add stories
3. Followed the docs to do all steps
4. In terminal => pnpm storybook
5. Go to the local link to check the result
6. See this:

I'm pretty sure that the bug can be reproduce. Please help, thank you.

Expected behaviour

On the right side, I will have a design panel and show the linked Figma design component.

Environment

• [ ] Chrome / Chromium / Chromium based browsers
• [ ] Firefox
• [ ] macOS Safari
• [ ] iOS Safari
• [ ] Samsung Internet
• [X] Other

Affected versions

^6.3.1

Storybook versions

^7.5.3

[pocka]

The package name has been changed from storybook-addon-designs to @storybook/addon-designs from v7. The current online doc (GHPages) is not updated to the latest version (v7). Refer to README.md for the time being.

I don't know about Next.js + Storybook integration stuff but looking at your versions and the error message, it should work on the latest version of the addon.

[TsengTofu]

The package name has been changed from storybook-addon-designs to @storybook/addon-designs from v7. The current online doc (GHPages) is not updated to the latest version (v7). Refer to README.md for the time being.

I don't know about Next.js + Storybook integration stuff but looking at your versions and the error message, it should work on the latest version of the addon.

Pocka, thank you 🙌🏻

According to your answer, I do this to get what I want. main.js => the storybook setting file

// change the addon name
addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
    '@storybook/addon-designs',
],

preview.js => the docs mentioned steps, as you said might not update

// remove this line
import { withDesign } from 'storybook-addon-designs';
const preview = {
  ...preview,
  // remove this line
  decorators: [withDesign],
};

And in my component story below:

parameters = {
  design: {
    type: 'figspec',
    accessToken: '',
    url: ''
  },
}

Works fine✨✨✨✨✨✨✨

Here is the snapshot for my packages version: storybook: ^7.5.3 Other addons

Hope it can help other people. And thanks again, without your hint, I won't get it work.

[MrSunshyne]

@pocka Is the "withDesign" decorator no longer required? What was it's purpose? I can't seem to find docs about it. I see it in an existing codebase, and i'm not sure what I lose by removing it.

[pocka]

@MrSunshyne See #144. TL;DR is you don't need the decorator and it has been there for unknown reasons (probably mistake).