[Bug]: 7.0.0 - Module '"@storybook/addon-actions/decorator"' has no exported member 'withActions'

[jattasNI]

Describe the bug

According to the 7.0 migration guide I should be able to use the withActions decorator via import { withActions } from '@storybook/addon-actions/decorator';. But when I run TypeScript compile this gives me "error TS2305: Module '"@storybook/addon-actions/decorator"' has no exported member 'withActions'."

It looks like withActions is exported from addons/actions/src/decorator.ts but is not exported from addons/actions/src/index.ts. This differs from other decorators like withLinks which are exported from their index.ts.

It looks like this is intended to work via the "exports" field in package.json for declaring multiple entry points in package.json. That feature gained support in TypeScript 4.7.0. But I tried upgrading my project from TypeScript 4.6.4 to 4.7.0 and still saw the same error.

To Reproduce

This is reproducing in this branch of the ni/nimble repository. To reproduce, clone that repo, checkout that branch, run npm i and npm run build. If a more targeted reproduction would be helpful I can try to create one.

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.15.1 - /usr/local/bin/node
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Firefox: 111.0.1
    Safari: 16.3

Additional context

This was also reported in #21308 but that bug is marked as fixed and I'm still seeing the problem. I don't have permission to re-open that issue and I was worried my comment there would get lost so I filed a new one; sorry if that's not the correct workflow!

[shilman]

@jattasNI thanks for re-filing the issue and for the detailed backstory. we'll see if we can get to the bottom of it. in the meantime can you declare the module as a workaround?

declare module '@storybook/addon-actions/decorator';

[shilman]

@ndelangen we have stories for this in https://github.com/storybookjs/storybook/blob/next/code/addons/actions/template/stories/parameters.stories.ts, but they are also producing a TS error in VScode. Mind taking a look?

[jattasNI]

@shilman thanks for the workaround, it does work for us!

In case it helps others, the full picture that worked with our TypeScript configuration was to add a new declaration file containing the workaround, storybook-declarations.d.ts:

declare module '@storybook/addon-actions/decorator';

And then import and use withActions as described in the docs:

import { withActions } from '@storybook/addon-actions/decorator';
...
{
    decorators: [withActions],
}

Once this issue is addressed hopefully we can just delete the new declaration file.

[shilman]

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.0 containing PR #21922 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.3 containing PR #21922 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade