Uncaught Error: Singleton client API not yet initialized, cannot call addParameters #50

husayt · 2021-06-27T16:59:05Z

I have managed to get storybook running with start-storybook. I have also now managed to get the build compete.
But when I open the generated SB page I get the following error:

iframe.778fe525.js:33 Uncaught Error: Singleton client API not yet initialized, cannot call addParameters
    at addParameters (iframe.778fe525.js:33)
    at iframe.778fe525.js:90
    at Array.forEach (<anonymous>)
    at iframe.778fe525.js:90
    at Array.forEach (<anonymous>)
    at iframe.778fe525.js:90

Has anyone seen something similar perhaps?

I am using vue3 on windows.

The text was updated successfully, but these errors were encountered:

husayt · 2021-06-27T18:08:33Z

This seems to be related to storybookjs/storybook#15210

husayt · 2021-07-05T10:24:43Z

Now it only works if I disable all plugins including essential addons., which defies the purpose. Maybe this can help to identify the issue.

martinsuba · 2021-07-08T06:20:04Z

I'm getting the same error after upgrading from 6.1.11. to 6.3.2. I've also tried upgrading to 6.4.0-alpha.12 (with webpack 5) and the result is same, except now I'm also getting this in console:
99% done plugins webpack-hot-middlewarewebpack built preview dbb930f7764ba3c321a1 in 1409ms
Seems like the built is stuck somehow, and there's an infinite loader on the storybook page.

Enteleform · 2021-07-29T13:58:40Z

I'm getting a similar error with Storybook 6.3.6 & Vite 2.4.4, for both start-storybook and build-storybook.

Rolling Vite back to 2.4.2 seems to work for start-storybook, but not build-storybook.

Below are the relevant dependencies. All of the dependencies in my project, including the ones listed below, are the most recent versions available as of today. I am using addons, but the issues still occur if they're disabled, so I omitted them from the list.

package.json/dependencies

"@storybook/svelte":             "6.3.6",
"@storybook/addon-svelte-csf":   "1.1.0",
"storybook-builder-vite":        "0.0.12",

"svelte":                        "3.41.0",
"svelte-hmr":                    "0.14.7",
"svelte-preprocess":             "4.7.4",
"@tsconfig/svelte":              "2.0.1",

"vite":                          "2.4.4",
"vite-tsconfig-paths":           "3.3.13",
"@sveltejs/vite-plugin-svelte":  "1.0.0-next.15",

console.error

client_api.js:55 Uncaught Error: Singleton client API not yet initialized, cannot call addParameters
    at addParameters (client_api.js:55)
    at vite-app.js:31
    at Array.forEach (<anonymous>)
    at vite-app.js:17
    at Array.forEach (<anonymous>)
    at vite-app.js:16

husayt · 2021-09-13T12:51:13Z

I finally found a solution to this here
I will just copy the correct answer, as it solved this for once:

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
},

Thanks @develar

mariusheine · 2021-09-14T00:15:52Z

@husayt Awesome and thx! This fixed it for us as well 😃

Now we only need to wait for the root problem to be solved. I am wondering if this is a vite builder specific problem or if the root problems lies in the storybook core as others have the same problem with other builders... 🤔

shilman · 2021-09-14T01:03:07Z

For those of you for whom this dedupe solution works 👆, I'm wondering why you have multiple copies of @storybook/client-api installed? Perhaps you need to make sure your storybook-related packages are on the same version?

This should help:

npx sb info

Enteleform · 2021-09-14T01:38:09Z

@shilman
npx sb info didn't seem to provide much useful info:

System:
  OS: Windows 10 10.0.19042
  CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Binaries:
  Node: 16.4.2 - C:\_\Dev\NodeJS\1~6\node.EXE
  Yarn: 1.22.10 - C:\_\Dev\NodeJS\16\yarn.CMD
  npm: 7.18.1 - C:\_\Dev\NodeJS\16\npm.CMD
Browsers:
  Chrome: 93.0.4577.63
  Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.38)
npmPackages:
  @storybook/addon-actions: 6.3.8 => 6.3.8

Might be because I'm using a Yarn workspace?

Here's a full list of my Svelte/Vite/Storybook related dependencies. I just updated them all to latest as of today (was stuck on a few older versions before the fix), but I just confirmed that the issue does still occur *without* the fix, even with the latest dependencies. Seems to be working fine once deduped though 👍.

{
  "svelte":                        "3.42.5",
  "@tsconfig/svelte":              "2.0.1",
  "svelte-hmr":                    "0.14.7",
  "svelte-preprocess":             "4.9.4",

  "vite":                          "2.5.7",
  "@sveltejs/vite-plugin-svelte":  "1.0.0-next.23",
  "vite-plugin-optimize-persist":  "0.0.5",
  "vite-plugin-package-config":    "0.0.3",
  "vite-tsconfig-paths":           "3.3.14",
  
  "@storybook/svelte":             "6.3.8",
  "@storybook/addon-svelte-csf":   "1.1.0",
  "storybook-builder-vite":        "0.0.12",

  "@storybook/addon-actions":      "6.3.8",
  "@storybook/addon-controls":     "6.3.8",
  "@storybook/addon-docs":         "6.3.8",
  "@storybook/addon-events":       "6.2.9",
  "@storybook/addon-links":        "6.3.8",
  "@storybook/addon-measure":      "6.4.0-alpha.27",
  "@storybook/addon-outline":      "6.4.0-alpha.27",
  "@storybook/addon-postcss":      "2.0.0",
  "@storybook/addon-storysource":  "6.3.8",
  "@storybook/addon-toolbars":     "6.3.8",
  "@storybook/addon-viewport":     "6.3.8",
  "@storybook/theming":            "6.3.8",

  "storybook-addon-paddings":      "4.2.1",
  "storybook-addon-pseudo-states": "1.0.0",
  "storybook-addon-themes":        "6.1.0",
  "storybook-dark-mode":           "1.0.8",
  "storybook-facelift":            "6.9.0",
  "storybook-stylesheet-toggle":   "0.1.3"
}

shilman · 2021-09-14T01:47:23Z

If you downgrade addon-measure and addon-outline to 6.3.8, and remove addon-events, does that fix it without the dedupe?

Enteleform · 2021-09-14T02:26:38Z

@shilman

If you downgrade addon-measure and addon-outline to 6.3.8, and remove addon-events, does that fix it without the dedupe?

So neither of those seems to actually have a 6.3.8 version. However, I had done a bit of debugging when I first ran into the issue, and just tried the same approach again and got the same results. Removing all non-essential addons (both official & 3rd party) still results in the error.

Here is the reduced dependency list:

{
  "svelte":                        "3.42.5",
  "@tsconfig/svelte":              "2.0.1",
  "svelte-hmr":                    "0.14.7",
  "svelte-preprocess":             "4.9.4",

  "vite":                          "2.5.7",
  "@sveltejs/vite-plugin-svelte":  "1.0.0-next.23",
  "vite-plugin-optimize-persist":  "0.0.5",
  "vite-plugin-package-config":    "0.0.3",
  "vite-tsconfig-paths":           "3.3.14",
  
  "@storybook/svelte":             "6.3.8",
  "@storybook/addon-svelte-csf":   "1.1.0",
  "storybook-builder-vite":        "0.0.12",
}

husayt · 2021-09-14T07:49:44Z

@shilman it might also be related to #55 as I use pnpm and have to enable hoisting. That might be causing ambiguity with peer dependencies which requires then to use dedupe to work.

vikingair · 2021-09-15T14:56:58Z

I can confirm that I ran into the same problem using pnpm without shamefully hoisting 😞 so it's very likely related.

0x009922 · 2021-09-23T05:50:11Z

I ran into it too, even with pnpm i --shamefully-hoist.

Closes #50 Closes #157 This is the same fix as storybookjs/storybook#11092

joshwooding · 2021-11-27T12:32:06Z

Re-opening this since we reverted the fix. Something interesting I found is that this error does not occur when storyStoreV7 is enabled even though duplicate ClientApi files are included in the bundle.

Also including some context from #157 this happens because @storybook/vue3 and @storybook/svelte have their own node_modules

spacedawwwg · 2022-01-26T12:31:51Z

I'm hitting this issue to using @storybook/vue3 + @storybook/addon-essentials

Environment Info:

  System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 3.1.1 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.3 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Edge: 97.0.1072.69
    Firefox: 96.0.2
    Safari: 15.2
  npmPackages:
    @storybook/addon-essentials: next => 6.5.0-alpha.23 
    @storybook/addon-links: next => 6.5.0-alpha.23 
    @storybook/vue3: next => 6.5.0-alpha.23

Using

module.exports = {
 features: {
   storyStoreV7: true,
 },
}

to get by for now

IanVS · 2022-01-26T12:37:23Z

@spacedawwwg do you happen to have a reproduction that you can share?

spacedawwwg · 2022-01-26T13:13:20Z

@IanVS sure, just popped it together:

https://github.com/spacedawwwg/storybook-vite-issues

As I say above, I can get around the issue by using storyStoreV7 for now, but it'd be nice to to have to

const path = require('path');

module.exports = {
  addons: ['@storybook/addon-essentials'],
  core: {
    builder: 'storybook-builder-vite',
  },
  // TODO: understand why storyStoreV7 required 
  // (due to issues with storybook-builder-vite + @storybook/vue3 + @storybook/addon-essentials)
  features: {
    storyStoreV7: true,
  },
  framework: '@storybook/vue3',
  staticDirs: ['public'],
  stories: [
    // documentation stories
    '../docs/index.stories.mdx',
    // component stories
    '../packages/**/*.docs.stories.mdx',
    '../packages/**/__stories__/*.stories.@(js|jsx|ts|tsx)',
  ],
  async viteFinal(config) {
    // dedupe required
    // TODO: follow https://github.com/eirslett/storybook-builder-vite/issues/50
    config.resolve.dedupe = ['@storybook/client-api'];

    // quick aliases
    config.resolve.alias['#root'] = path.resolve(__dirname, '../');
    config.resolve.alias['#storybook'] = path.resolve(__dirname, '../.storybook');

    return config;
  },
};

IanVS · 2022-01-26T14:55:23Z

"@storybook/addon-docs": "next",
"@storybook/addon-essentials": "^6.4.14",
"@storybook/vue3": "next",

Is there a reason that addon-essentials is not at the same version as the others? Storybook generally expects to all be at the same version, or it causes problems like you're experiencing now.

spacedawwwg · 2022-01-26T22:59:45Z

@IanVS that was a mixup when I was creating the repo. I've updated them all to next (on the repo above) and it's the same issue.

bfanger · 2022-02-04T04:50:57Z

The issue (when trying to run the examples)

Multiple "versions" of ClientApi.js.

Running find . -name ClientApi.js reveals 3 locations:

./node_modules/@storybook/svelte/node_modules/@storybook/client-api/dist/esm/ClientApi.js
./node_modules/@storybook/svelte/node_modules/@storybook/client-api/dist/modern/ClientApi.js
./node_modules/@storybook/svelte/node_modules/@storybook/client-api/dist/cjs/ClientApi.js
./node_modules/@storybook/vue3/node_modules/@storybook/client-api/dist/esm/ClientApi.js
./node_modules/@storybook/vue3/node_modules/@storybook/client-api/dist/modern/ClientApi.js
./node_modules/@storybook/vue3/node_modules/@storybook/client-api/dist/cjs/ClientApi.js
./node_modules/@storybook/client-api/dist/esm/ClientApi.js
./node_modules/@storybook/client-api/dist/modern/ClientApi.js
./node_modules/@storybook/client-api/dist/cjs/ClientApi.js

These are all at "version": "6.4.3", but using different folders causes multiple disconnected instances of the client singleton.

Workaround

Remove the nested versions of @storybook/client-api:

rm -rf ./node_modules/@storybook/svelte/node_modules/@storybook/client-api
rm -rf ./node_modules/@storybook/vue3/node_modules/@storybook/client-api

or force using the same folder using the config.resolve tricks mentioned before.

IanVS · 2022-02-04T14:42:33Z

It's still a mystery why there are multiples of them. I can't for the life of me figure out why yarn is not de-duplicating them.

xubaifuCode · 2022-03-10T09:46:07Z

I had the same problem when using pnpm in monorepo.

In my case, the point is that react and react-dom are not peer dep in @storybook/vue3.

just add react and react-dom as @storybook/vue3's peer dep.

.pnpmfile.cjs

module.exports = {
  hooks: {
    readPackage(pkg, ctx) {
      if (pkg.name === '@storybook/vue3') {
         packageJson.peerDependencies['react'] = '^16.8.0 || ^17.0.0';
         packageJson.peerDependencies['react-dom'] = '^16.8.0 || ^17.0.0';
       }
    },
  },
};

husayt mentioned this issue Jul 14, 2021

Backgrounds Addon custom values not working #62

Closed

eirslett added bug Something isn't working help wanted Extra attention is needed labels Jul 31, 2021

This was referenced Nov 19, 2021

Svelte and Vue examples doesnt work #157

Closed

Fix package duplication issues by aliasing all storybook packages #160

Merged

IanVS closed this as completed in #160 Nov 19, 2021

IanVS pushed a commit that referenced this issue Nov 19, 2021

Fix package duplication issues by aliasing all storybook packages (#160)

5100593

Closes #50 Closes #157 This is the same fix as storybookjs/storybook#11092

joshwooding reopened this Nov 27, 2021

joshwooding mentioned this issue Jan 7, 2022

Bump @vitejs/plugin-vue to 1.10.2 #199

Merged

IanVS mentioned this issue Jan 31, 2022

Problem after updating from 0.1.13 to 0.1.14. Sveltekit + Typescript + Storybook #224

Closed

This was referenced Feb 16, 2022

Fix: svelte #240

Merged

[Bug?]: Hoisting not working as expected yarnpkg/berry#4122

Closed

fragile fix for: Singleton client API not yet initialized #254

Merged

joshwooding closed this as completed in #254 Feb 23, 2022

olemarius mentioned this issue Mar 17, 2022

Singleton client API not yet initialized, cannot call addArgTypesEnhancer. #255

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught Error: Singleton client API not yet initialized, cannot call addParameters #50

Uncaught Error: Singleton client API not yet initialized, cannot call addParameters #50

husayt commented Jun 27, 2021

husayt commented Jun 27, 2021

husayt commented Jul 5, 2021 •

edited

Loading

martinsuba commented Jul 8, 2021

Enteleform commented Jul 29, 2021

husayt commented Sep 13, 2021

mariusheine commented Sep 14, 2021

shilman commented Sep 14, 2021

Enteleform commented Sep 14, 2021

shilman commented Sep 14, 2021

Enteleform commented Sep 14, 2021 •

edited

Loading

husayt commented Sep 14, 2021 •

edited

Loading

vikingair commented Sep 15, 2021 •

edited

Loading

0x009922 commented Sep 23, 2021

joshwooding commented Nov 27, 2021 •

edited

Loading

spacedawwwg commented Jan 26, 2022

IanVS commented Jan 26, 2022

spacedawwwg commented Jan 26, 2022 •

edited

Loading

IanVS commented Jan 26, 2022

spacedawwwg commented Jan 26, 2022

bfanger commented Feb 4, 2022

IanVS commented Feb 4, 2022

xubaifuCode commented Mar 10, 2022

Uncaught Error: Singleton client API not yet initialized, cannot call addParameters #50

Uncaught Error: Singleton client API not yet initialized, cannot call addParameters #50

Comments

husayt commented Jun 27, 2021

husayt commented Jun 27, 2021

husayt commented Jul 5, 2021 • edited Loading

martinsuba commented Jul 8, 2021

Enteleform commented Jul 29, 2021

husayt commented Sep 13, 2021

mariusheine commented Sep 14, 2021

shilman commented Sep 14, 2021

Enteleform commented Sep 14, 2021

shilman commented Sep 14, 2021

Enteleform commented Sep 14, 2021 • edited Loading

husayt commented Sep 14, 2021 • edited Loading

vikingair commented Sep 15, 2021 • edited Loading

0x009922 commented Sep 23, 2021

joshwooding commented Nov 27, 2021 • edited Loading

spacedawwwg commented Jan 26, 2022

IanVS commented Jan 26, 2022

spacedawwwg commented Jan 26, 2022 • edited Loading

IanVS commented Jan 26, 2022

spacedawwwg commented Jan 26, 2022

bfanger commented Feb 4, 2022

The issue (when trying to run the examples)

Workaround

IanVS commented Feb 4, 2022

xubaifuCode commented Mar 10, 2022

husayt commented Jul 5, 2021 •

edited

Loading

Enteleform commented Sep 14, 2021 •

edited

Loading

husayt commented Sep 14, 2021 •

edited

Loading

vikingair commented Sep 15, 2021 •

edited

Loading

joshwooding commented Nov 27, 2021 •

edited

Loading

spacedawwwg commented Jan 26, 2022 •

edited

Loading