"Singleton client API not yet initialized"

[gforrest-bw]

Describe the bug
Page crashes after a successful build, with the message in console:

Uncaught Error: Singleton client API not yet initialized, cannot call addParameters
    at addParameters (vendors~main.0d0c22069a536e53e511.bundle.js:67491)
    at Object../node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js (vendors~main.0d0c22069a536e53e511.bundle.js:56317)
    at __webpack_require__ (runtime~main.0d0c22069a536e53e511.bundle.js:849)
    at fn (runtime~main.0d0c22069a536e53e511.bundle.js:151)
    at Object.0 (main.0d0c22069a536e53e511.bundle.js:45532)
    at __webpack_require__ (runtime~main.0d0c22069a536e53e511.bundle.js:849)
    at checkDeferredModules (runtime~main.0d0c22069a536e53e511.bundle.js:46)
    at Array.webpackJsonpCallback [as push] (runtime~main.0d0c22069a536e53e511.bundle.js:33)
    at main.0d0c22069a536e53e511.bundle.js:1

I encountered this error while upgrading our 5.x repo to the latest 6 beta, in hopes of discovering if the new default behaviors would help fix our prop tables for Typescript components.

To Reproduce
I'm afraid I'm in a private repo.

I've attempted to reproduce the error with the exact same package versions and configuration in a clean project, to no avail. If a lack of repro is a problem, I understand - I mainly wanted to see if someone familiar with the codebase might be able to give me a hint as to why I'd ever see the error posted above, or how to debug.

Expected behavior
I expected Storybook to load in the browser after building.

Screenshots

Code snippets

main.js

module.exports = {
  stories: ['../src/**/*.stories.(ts|tsx|js|jsx|mdx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-docs',
  ],
  typescript: {
    check: false,
  },
};

I've removed all other configuration for Storybook to try to isolate the problem and test default 'no config' behaviors.

System:

Environment Info:

  System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.1.0
  npmPackages:
    @storybook/addon-actions: ^6.0.0-beta.12 => 6.0.0-beta.12
    @storybook/addon-docs: ^6.0.0-beta.12 => 6.0.0-beta.12
    @storybook/addon-links: ^6.0.0-beta.12 => 6.0.0-beta.12
    @storybook/addons: ^6.0.0-beta.12 => 6.0.0-beta.12
    @storybook/react: ^6.0.0-beta.12 => 6.0.0-beta.12
    @storybook/theming: ^6.0.0-beta.12 => 6.0.0-beta.12

Additional context

[shilman]

have you tried clearing node_modules, and possibly regenerating your lock file?

[matheo]

@gforrest-bw check inside your lock file too
it could contain different versions of the same package giving trouble.

[gforrest-bw]

I did clear node_modules. I didn't try deleting the lockfile though, good call.

FWIW npm ls doesn't appear to turn up duplicates of any Storybook modules.

[gforrest-bw]

Deleting the lockfile has at least gotten me to a different error (a React invalid hook call). I'll spend some time investigating it and open a new issue if I can't get past it.

Edit: yeah, new issue is #10895, so looks like I'm unblocked from this error. Thanks!

[tskarhed]

I can reproduce this in https://github.com/grafana/grafana/tree/storybook-build-optimization
The project root can be found here

Have tried cleaning lockfile and node_modules - had some version issues

[shilman]

@tskarhed can you remove these lines?

https://github.com/grafana/grafana/blob/storybook-build-optimization/packages/grafana-ui/.storybook/preview.ts#L60-L61

They should be implemented in main.js:

https://github.com/grafana/grafana/blob/storybook-build-optimization/packages/grafana-ui/.storybook/main.ts#L8

[matheo]

@shilman I just got this error while trying to symlink a storybook package of my project to the development dist folder.
To make it work again I just removed the symlink and copied the files manually. So this blocks any possibility to use npm link it seems.

[tskarhed]

We found the issue. Using addon-actions/preset caused the error, doing addon-actions/register fixed it. Very unclear why, though. This was after moving stuff around a lot so it might be something else.

[shilman]

@tskarhed that sounds a bit fishy to me, but I'm glad you got it sorted. @tmeasday do you see anything weird here? They are still using addParameters/addDecorators rather than the named exports -- I just want to make sure we haven't regressed on that.

[tmeasday]

@shilman, I'm not sure, this code has been refactored a bit since I worked on it.

This is the important entry that we add to initialize the client API: https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/preview/entries.js#L40

I wonder if this sorting is incorrect and doesn't ensure it stays at the top. @ndelangen?

[ndelangen]

I'll take a look

[ndelangen]

@tskarhed I ran locally, and navigated to a few stories, I'm not seeing the error described in this report. Could you tel me what to do?

The branch is not on the latest version. Could I ask you to try the latest beta and see if the issue is resolved?

[tskarhed]

@ndelangen Yeah, we pushed the fix. If you change addon-actions/register to addon-actions/preset the error will appear in the browser. I will try the latest beta today.

[MarcusNotheis]

We are facing the exact same issue in https://github.com/SAP/ui5-webcomponents-react/tree/storybook-issue-repro.
If we add addon-actions/register to our main.js the error is gone and Storybook is working perfectly fine. If we just use addon-actions, we are facing the Singleton API error as well:

Environment Info

  System:
    OS: macOS 10.15.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.18.0 - /usr/local/opt/node@12/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/opt/node@12/bin/npm
  Browsers:
    Chrome: 83.0.4103.97
    Edge: 83.0.478.45
    Firefox: 76.0.1
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: 6.0.0-beta.22 => 6.0.0-beta.22 
    @storybook/addon-controls: 6.0.0-beta.22 => 6.0.0-beta.22 
    @storybook/addon-docs: 6.0.0-beta.22 => 6.0.0-beta.22 
    @storybook/addon-knobs: 6.0.0-beta.22 => 6.0.0-beta.22 
    @storybook/addon-toolbars: 6.0.0-beta.22 => 6.0.0-beta.22 
    @storybook/addons: 6.0.0-beta.22 => 6.0.0-beta.22 
    @storybook/cli: 6.0.0-beta.22 => 6.0.0-beta.22 
    @storybook/react: 6.0.0-beta.22 => 6.0.0-beta.22 
    @storybook/storybook-deployer: ^2.8.5 => 2.8.6 
    @storybook/theming: 6.0.0-beta.22 => 6.0.0-beta.22 

[ndelangen]

@MarcusNotheis I'm taking a look at your repro now.

[MarcusNotheis]

@MarcusNotheis I'm taking a look at your repro now.

Thanks @ndelangen.
I also just recognized that the actions are also not longer working (also tried with beta.23), but I'm not sure whether this is related to that issue as well or a totally different story.

EDIT:
I just tried to use actions in a new blank project (CRA + sb@next init) and actions are working fine there - so I would assume that the not working actions in our repo is a result of either using addon-actions/register instead of addon-actions or we have another missconfiguration in our repo.

[matheo]

@MarcusNotheis I can confirm that Actions work on beta.23

[tmeasday]

I also just recognized that the actions are also not longer working (also tried with beta.23), but I'm not sure whether this is related to that issue as well or a totally different story.

If the decorator can't be added that would explain why the actions aren't working I expect?

[ndelangen]

The problem is that there are multiple instances of the ClientApi package:

I tried re-generating the lockfile and re-installing but that didn't help.

The versions match... there's no reason for yarn to be duplicating these packages...

I'm stuck at why exactly yarn is doing this.

[shilman]

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.24 containing PR #11092 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[MarcusNotheis]

just upgraded to beta.26 and our Storybook is now working perfectly fine again! Thanks @ndelangen and @shilman!

[MacRayy]

I still have the same issue 😢
I updated my storybook packages to the latest version:

    "@storybook/addon-actions": "^6.3.6",
    "@storybook/addon-controls": "^6.3.6",
    "@storybook/addon-docs": "^6.3.6",
    "@storybook/addon-knobs": "^6.2.9",
    "@storybook/addon-links": "^6.3.6",
    "@storybook/addon-measure": "^2.0.0",
    "@storybook/addon-options": "^5.3.21",
    "@storybook/addon-toolbars": "^6.3.6",
    "@storybook/addon-viewport": "^6.3.6",
    "@storybook/addons": "^6.3.6",
    "@storybook/builder-webpack5": "^6.3.6",
    "@storybook/react": "^6.3.6",
    "@storybook/storybook-deployer": "^2.8.10",
    "@storybook/theming": "^6.3.6",
    "@storybook/builder-webpack5": "^6.3.6",
    "@storybook/manager-webpack5": "^6.3.6",

And I'm using "react": "^17.0.2" and "webpack": "^5.37.1" with "dotenv-webpack": "^7.0.2",.

Here is the error message:

bootstrap:27 Uncaught Error: Singleton client API not yet initialized, cannot call addParameters
    at addParameters (vendors-node_modules_crello_react-lottie_dist_index_esm_js-node_modules_pmmmwh_react-refresh--bb2a89.iframe.bundle.js:62509)
    at vendors-node_modules_crello_react-lottie_dist_index_esm_js-node_modules_pmmmwh_react-refresh--bb2a89.iframe.bundle.js:26807
    at Array.forEach (<anonymous>)
    at ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js (vendors-node_modules_crello_react-lottie_dist_index_esm_js-node_modules_pmmmwh_react-refresh--bb2a89.iframe.bundle.js:26781)
    at Object.options.factory (runtime~main.iframe.bundle.js:662)
    at __webpack_require__ (runtime~main.iframe.bundle.js:28)
    at __webpack_exec__ (main.iframe.bundle.js:259182)
    at main.iframe.bundle.js:259183
    at Function.__webpack_require__.O (runtime~main.iframe.bundle.js:80)
    at main.iframe.bundle.js:259184

[MacRayy]

The issue is gone after running:

npm ls | grep client-api

npm dedupe

[gavmck]

I was also getting this after upgrading to 6.3.6. @storybook/addon-knobs does not update when coming from 6.2.9 as it's deprecated and it still requires @storybook/client-api 6.2.9 which causes the conflict.

Just ended up rolling back to 6.2.9 :(

[shilman]

@gavmck There's a @storybook/addon-knobs@6.3.0 that should be compatible with the 6.3 stack https://github.com/storybookjs/addon-knobs/blob/next/package.json

[gavmck]

@shilman Yeah I tried that, but no luck unfortunately. I'll come back to it later. Thanks!

[develar]

The solution for vite builder — force dedupe (see https://github.com/eirslett/storybook-builder-vite#customize-vite-config):

async viteFinal(config, {configType}) {
    config.resolve.dedupe = ["@storybook/client-api"]
    return config
},

[penx]

I'm getting this when upgrading to 6.3.8, more info in #16097

[marksy]

Hi @penx - did you manage to solve this? I just ran into this problem :D

[avennn]

I had this problem because I had two versions of @storybook/client-api. @storybook/client-api@6.4.9 is dependency of @storybook/builder-webpack5@6.4.9，@storybook/client-api@6.4.8 is dependency of @storybook/*@6.4.8. I updated @storybook/* to v6.4.9，and this problem resolved.