Dependency on @storybook/api or incompatibility with latest alpha of storybook

[jrencz]

Affected design types

• figma
• figspec
• link
• image
• iframe

Describe the bug

I updated Storybook from alpha.49 to alpha.54 (next as of today) and storybook-addon-designs from beta.1 to beta.2 and I got the following error:

✘ [ERROR] Could not resolve "@storybook/api"

    node_modules/storybook-addon-designs/esm/register/index.js:2:29:
      2 │ import { useParameter } from "@storybook/api";
        ╵                              ~~~~~~~~~~~~~~~~

  You can mark the path "@storybook/api" as external to exclude it from the bundle, which will
  remove this error.

✘ [ERROR] Could not resolve "@storybook/api"

    node_modules/storybook-addon-designs/esm/register/containers/Wrapper.js:3:48:
      3 │ import { useParameter, useStorybookState } from "@storybook/api";
        ╵                                                 ~~~~~~~~~~~~~~~~

  You can mark the path "@storybook/api" as external to exclude it from the bundle, which will
  remove this error.

Installing @storybook/api in project as project's own devDependency resolves the problem

How to reproduce the bug?

1. Install storybook 7.0.0-alpha.49 and storybook-addon-designs 7.0.0-beta.1, check that storybook starts without errors
2. update storybook to alpha.54 and storybook-addon-designs to beta-2, check that there are errors during start of storybook (storybook dev)

Expected behaviour

There's no need to install @storybook/api in project to make storybook-addon-designs not break storybook dev

After quick bisect it turned out that alpha.54 stopped installing @storybook/api as its dependency

https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md#700-alpha54-november-25-2022

Environment

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

Affected versions

7.0.0-beta.2

Storybook versions

7.0.0-alpha.54

[pocka]

Oh... that's an uncomfortable breaking change...

I believe there is no way to avoid manually installing @storybook/api:

• Changing to @storybook/manager-api breaks v6.x compatibility
• Moving @storybook/api into regular dependency would very likely cause a version mismatch problem

I'll update README once Storybook v7.0-beta is shipped.

[jrencz]

Maybe you might escalate that to sb team. It's still an alpha so maybe it wasn't intended an/or can be reconsidered?

[pocka]

@jrencz It seems the @storybook/api package has been re-added to the @storybook/manager's dependency list in storybookjs/storybook#20021. Can you try the latest Storybook beta?

[jrencz]

@pocka Sorry for the delay - I had some rough time on the project before holidays and I didn't have time to upgrade SB until today.

I tried on 7.0.0-beta.15 and the original problem is gone.
But... there's a new one:

✘ [ERROR] Could not resolve "@storybook/addons"

    node_modules/storybook-addon-designs/esm/index.js:1:38:
      1 │ import { addons, makeDecorator } from "@storybook/addons";
        ╵                                       ~~~~~~~~~~~~~~~~~~~

This one does exist on NPM: https://www.npmjs.com/package/@storybook/addons/v/7.0.0-beta.15 yet it's not being isntalled out of the box with storybook@7.0.0-beta.15

There's a warning in readme:

The contents of this package have moved to `@storybook/preview-api` and `@storybook/manager-api`. Please update your import depending on where are are using this API.

This package will no longer be released as part of the 8.0 release of storybook.

Both @storybook/preview-api and @storybook/manager-api come with storybook

[jonniebigodes]

I'm one of the Storybook maintainers. I focus primarily on documentation and community outreach. Just wanted to follow up on this issue, letting you know that the Storybook API for building addons is currently being updated to factor in the changes introduced by the upcoming 7.0 release. If you're interested in making the required changes to help the community from benefiting from using your addon, we've prepared an abridged guide for the required changes here, and if you have any questions or issues, please reach out to us in the #prerelease channel in our Discord Server.

Hope you have a great day!

Stay safe

[pocka]

I failed to reproduce the Could not resolve "@storybook/addons" problem, it could have been fixed or is caused by Storybook's internal dependecy gotchas.

1. mkdir sb-test
2. Create a simple package.json
3. npx -p storybook@next storybook init
4. Remove @storybook/testing-library from package.json, as it pulls v6 deps
5. Remove stories/Page.stories.js, as it uses @storybook/testing-library
6. npm i -D --force storybook-addon-designs@beta (--force or --legacy-peer-deps is required as our package.json does not list SB@7beta in peer deps)
7. Add a design parameter to the auto generated story
8. npm run storybook
9. The addon working as intended

% npm why @storybook/addons
@storybook/addons@7.0.0-beta.25 dev
node_modules/@storybook/addons
  @storybook/addons@"7.0.0-beta.25" from @storybook/builder-webpack5@7.0.0-beta.25
  node_modules/@storybook/builder-webpack5
    @storybook/builder-webpack5@"7.0.0-beta.25" from @storybook/react-webpack5@7.0.0-beta.25
    node_modules/@storybook/react-webpack5
      dev @storybook/react-webpack5@"^7.0.0-beta.25" from the root project

% cat package.json 
{
  "name": "sb-test",
  "version": "1.0.0",
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "license": "UNLICENSED",
  "private": true,
  "devDependencies": {
    "@storybook/addon-essentials": "^7.0.0-beta.25",
    "@storybook/addon-interactions": "^7.0.0-beta.25",
    "@storybook/addon-links": "^7.0.0-beta.25",
    "@storybook/blocks": "^7.0.0-beta.25",
    "@storybook/react": "^7.0.0-beta.25",
    "@storybook/react-webpack5": "^7.0.0-beta.25",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "^7.0.0-beta.25",
    "storybook-addon-designs": "^7.0.0-beta.2"
  }
}

@jrencz
Would you mind sharing which Storybook packages and package manager you're using?

@jonniebigodes
Thank you for reaching out. I believe this addon is already compatible with Storybook v7 API-wise, thanks to these contributions.

• fix: update storybook addons import for Storybook 7.0 #160
• Fix support for Storybook 7.0.0-alpha #173

[jrencz]

By the end of the week I will check what I have now (last time I updated it was beta.19) and confirm if that problem still exists. And if it does I'll try bumping to beta.25

[jrencz]

At the time I wrote #178 (comment) and so far in my setup it looks like that:

• I have msw-storybook-addon@1.6.3 which requires @storybook/addons
• storybook-addon-designs@7.0.0-beta.2 has peerDependency of "@storybook/addons": "^6.4.0 || ^7.0.0"
• back then I resolved the problem by adding @storybook/addons as devDependency of my project

and it worked.

Now I removed explicit dependency on @storybook/addons. Npm moved @storybook/addons to node_modules/msw-storybook-addon/node_modules/@storybook/addons and error came back

Then I removed and added back msw-storybook-addon which fixed the structure of my node_modules - now @storybook/addons is at node_modules/@storybook/addons and it works once again, yet now I have @storybook/addons@6.5.15 because msw-storybook-addon wants ^6.0.0.

I suppose it now works purely be accident - because I use msw-storybook-addon and it's that one which allows storybook-addon-designs@7.0.0-beta.2 to work without problem.

I hope to have some more time to try beta.25 later - maybe something that comes with it (or with @storybook-addon-essentials which it's probably save to assume vast majority uses) brings back @storybook/addons

[jonniebigodes]

@pocka thanks for following up with me on this. Appreciate it 🙏 ! Glad that everything is already being already working with the new API, should any issue arise, don't hesitate to reach out to us via our Discord Server or the issue tracker.

Hope you have a great day.

Stay safe

[jrencz]

As a followup to my previous comment #178 (comment)

I now tried updating storybook from 7.0.0-beta.19 to 7.0.0-beta.25 and in beta.25 there's still nothing in either storybook or @storybook/addon-essentials which would require @storybook-addons. it's still msw-storybook-addon which is the only thing in my case that requires @storybook-addons and I still have @storybook-addons@6.5.15

It satisfies peerDependency of storybook-addon-designs, but was it not for the fact that I do have msw-storybook-addon, I'd not have it installed and

✘ [ERROR] Could not resolve "@storybook/addons"

    node_modules/storybook-addon-designs/esm/index.js:1:38:
      1 │ import { addons, makeDecorator } from "@storybook/addons";
        ╵                                       ~~~~~~~~~~~~~~~~~~~

would be back.

To my knowledge storybook-addon-designs should have @storybook/addons as dependency, not peerDependency

[olets]

I was getting the same error

Could not resolve "@storybook/addons"

I resolved it with

npm i -D @storybook/addons

(I spun up a Stackblitz with the storybook-addon-designs dependency. Stackblitz is picky and insisted on adding several additional dependencies. Adding them all locally fixed it. Narrowed it down from there.)

I'm on Storybook (and @storybook/... things) 7.0.0-beta.30 and storybook-addon-designs 7.0.0-beta.2.

@jrencz I wonder if your trouble comes from mixing @storybook/addons 6 with Storybook 7. per the following response, I misunderstood the previous comment

[jrencz]

@olets Thanks for your input. It might not be clear: I don't have any problem if I have @storybook/addons@6.x

I'm pointing out that I have any version purely because I have some other addons, msw addon in my case. In case I didn't use that one then error would appear and I would have done what you suggested: install storybook/addons as dependency of my project (where my project does not import from storybook/addons)

Designs addon does depend on API from package @storybook/addons and I want to point out that that package should be a dependency, not peerDependency

[pocka]

that package should be a dependency, not peerDependency

No. While using peerDependencies in this case is semantically incorrect, it's required to avoid version conflict problems (e.g. both @storybook/addons@6.0.0 and @storybook/addons@6.0.1 exists and singleton or something does not work).

In an ideal world, package managers should pick/resolve the correct versions of Storybook libs even they are listed as direct dependencies. Unfortunately package managers most of the times failed to resolve to a version user installed. This is why it's peerDependencies IIRC. I'm not sure the situation changed or not.

(I spun up a Stackblitz with the storybook-addon-designs dependency. Stackblitz is picky and insisted on adding several additional dependencies. Adding them all locally fixed it. Narrowed it down from there.)

I believe Stackblitz being strict instead of picky. Installing them locally is the reliable solution and a workaround for now.

[jrencz]

@pocka thanks for the link. I studied that repo and now I know a little more

It's even mentioned explicitly in https://storybook.js.org/docs/react/addons/writing-addons#packaging-and-publishing (and same in docs for upcoming 7.0) but the storybook-addon-outline given as a reference in that section uses @storybook/addons as dependency.

It was set to ^6.0.0 via https://github.com/chromaui/storybook-addon-outline/pull/6/files

My assessment is that the guideline might not yet have been revised for the dependency structure of @storybook/addon-essentials@next, which at beta.30 does not come with @storybook/addons. It stopped at storybookjs/storybook#19952 in alpha.54, where @storybook/addon-essentials@6.5.15 does come with @storybook/addons as dependency and therefore having it as peerDependency in an addon, even if it's a 3rd part addon like this one does actually make sense.

[thafryer]

Hi Everyone! We have released a new version of the addon. We also changed the package name for the addon, @storybook/addon-designs. Please follow instructions from the readme to get going with the latest version.

https://github.com/storybookjs/addon-designs/blob/master/README.md