Uncaught Error: Singleton client API not yet initialized, cannot call `addArgTypesEnhancer`. with 6.5.0-alpha.39 #17504

francoisromain · 2022-02-14T17:01:22Z

Describe the bug
When I updated to stroybook v.6.5.0-alpha.39 and run npm run stroybook, there is this error:

Uncaught Error: Singleton client API not yet initialized, cannot call `addArgTypesEnhancer`.

System
Please paste the results of npx sb@next info here.

  System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (8) x64 Intel(R) Core(TM) i7-2600 CPU @ 3.40GHz
  Binaries:
    Node: 17.5.0 - /usr/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 8.4.1 - /usr/bin/npm
  Browsers:
    Firefox: 96.0
  npmPackages:
    @storybook/addon-actions: ^6.5.0-alpha.39 => 6.5.0-alpha.39 
    @storybook/addon-docs: ^6.5.0-alpha.39 => 6.5.0-alpha.39 
    @storybook/addon-essentials: ^6.5.0-alpha.39 => 6.5.0-alpha.39 
    @storybook/addon-links: ^6.5.0-alpha.39 => 6.5.0-alpha.39 
    @storybook/addon-svelte-csf: ^1.1.0 => 1.1.0 
    @storybook/svelte: ^6.5.0-alpha.39 => 6.5.0-alpha.39

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

geisterfurz007 · 2022-03-05T16:05:24Z

Hitting the same thing after upgrading from 6.3.12 to 6.4.19. My understanding is that this is caused by multiple @storybook/client-api instances in the node_modules directory however going back to a working state I found that this was the case in both the working as well as the broken state. I have node_modules/@storybook/client-api as well as node_modules/@storybook/preact/node_modules/@storybook/client-api and no idea why the packages of the preact package aren't hoisted.

~~Before I go down that rabbit hole any further, could someone confirm that this is indeed the culprit (in that case I would be curious why it worked with 6.3.12 before)?~~

Scratch all that; it wasn't the upgrade; some other dependency seemed to have caused mayhem; I will report here when I found out which one it was.

jaminellis · 2022-03-10T10:51:27Z

I have had the same thing here. Let me know if you workout what is interfering. I have my suspicions it is related to addon-storyshots

IanVS · 2022-03-10T13:31:41Z

Are either of you using the vite builder, by chance?

francoisromain · 2022-03-10T13:38:15Z

I don't have the problem anymore after

I updated storybook,
and did this: github.com/"Singleton client API not yet initialized" #10887#issuecomment-901109891

Environment Info:

  System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (8) x64 Intel(R) Core(TM) i7-2600 CPU @ 3.40GHz
  Binaries:
    Node: 17.7.0 - /usr/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 8.5.3 - /node_modules/.bin/npm
  Browsers:
    Firefox: 97.0.2
  npmPackages:
    @storybook/addon-docs: ^6.5.0-alpha.46 => 6.5.0-alpha.46 
    @storybook/addon-essentials: ^6.5.0-alpha.46 => 6.5.0-alpha.46 
    @storybook/addon-links: ^6.5.0-alpha.46 => 6.5.0-alpha.46 
    @storybook/addon-svelte-csf: ^1.1.0 => 1.1.0 
    @storybook/svelte: ^6.5.0-alpha.46 => 6.5.0-alpha.46

"storybook-builder-vite": "^0.1.18",

and ./storybook/main.cjs file. :
look at config.resolve.dedupe

const preprocess = require("svelte-preprocess");

module.exports = {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)",
  ],
  addons: ["@storybook/addon-essentials", "@storybook/addon-links"],
  framework: "@storybook/svelte",
  core: {
    builder: "storybook-builder-vite",
  },
  staticDirs: ["../static"],
  svelteOptions: {
    preprocess: [preprocess({ postcss: true, sourceMap: true })],
  },

  async viteFinal(config, { configType }) {
    // github.com/storybookjs/storybook/discussions/17433
    // BASE_URL est définie dans `.github/workflows/storybook.yml`
    const baseUrl = process.env.BASE_URL;

    if (baseUrl) {
      config.base = `${baseUrl}/`;
    }

    // `Uncaught Error: Singleton client API not yet initialized, cannot call addParameters`
    // github.com/storybookjs/storybook/issues/10887#issuecomment-901109891
    config.resolve.dedupe = ["@storybook/client-api"];

    return config;
  },
};

IanVS · 2022-03-10T13:48:56Z

Thanks for reporting back!

geisterfurz007 · 2022-03-11T20:42:03Z

Figured I would report back as well; I am not using vite but after starting from scratch again, I cannot reproduce this anymore either. This attempt I haven't tried to move to webpack 5 though, which may have been an issue before considering this appears to have been solved for vite with a dedupe option. If I move on from webpack 4, I will probably try to jump straight to vite though so hopefully I won't see this again!

Thanks for the vite-fix!

gwvt · 2022-04-13T16:34:03Z

I just migrated from storybook-builder-vite 0.1.23 to @storybook/builder-vite 0.1.28 and got this error. (Tried removing node_modules and package-lock.json and reinstalling dependencies but no luck.)

IanVS · 2022-04-13T17:34:13Z

@gwvt are you able to create a reproduction that I can take a look at? That would be super-helpful, since you've already ruled out a stale cache / version mismatch problem.

gwvt · 2022-04-13T20:29:47Z

Thanks @IanVS ! Shell output looks normal...

But the page load hangs...

With this error in the console...

Please let me know if I can provide anything further.

IanVS · 2022-04-13T20:35:15Z

Hi thanks, yes if you're able to either share a link to the repository where this is occurring (if it is open source) or create a new repository and get it into this same state, that's going to be the best way for me to dig into this.

thadeucity · 2022-04-13T20:56:39Z

@IanVS

I'm having the same issue, and managed to duplicate it at https://github.com/thadeucity/storybook-vite-bug

System:
OS: Windows 10.0.22000.527
CPU: (8) x64 Intel(R) Core(TM) i7-11800H CPU @ 4.60GHz
Binaries:
Node: v16.14.2
Yarn: 1.22.18
npm: 8.5.5
Browsers:
Firefox: 101.0a1

thadeucity · 2022-04-13T21:45:09Z

@IanVS

Following these steps I was able to run the Storybook itself, but I got errors loading the components

// Setup a project
yarn init

// Add Vite
yarn add -D vite

// Setting up the storybook (Selected: y -> react)
npx sb@next init --builder storybook-builder-vite

// Installing React
yarn add -D react react-dom

// Trying to run storybook
yarn storybook

storybook ends up in an endless loop (missing global), so I created the file:

// .storybook\preview-head.html

<script>
 window.global = window;
</script>

Now storybook runs, but when I try to open any of the sample components I get the error:
TypeError: reactDomClient.createRoot is not a function

IanVS · 2022-04-13T21:51:12Z

TypeError: reactDomClient.createRoot is not a function happens when there's a mismatch somewhere between react 18 and a version less than that.

It looks like you're using the older storybook-builder-vite command, so you won't have the fix. Try leaving off the --builder, it'll be set automatically. Or, use --builder @storybook/builder-vite.

thadeucity · 2022-04-13T22:11:38Z

@IanVS
I tried as suggested but I'm receiving the same error (also tried without the --builder )

yarn init
yarn add -D vite react react-dom
npx sb@next init --builder @storybook/builder-vite

yarn storybook

//package.json


{
  "name": "vite-storybook",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@storybook/addon-actions": "^6.5.0-alpha.62",
    "@storybook/addon-essentials": "^6.5.0-alpha.62",
    "@storybook/addon-interactions": "^6.5.0-alpha.62",
    "@storybook/addon-links": "^6.5.0-alpha.62",
    "@storybook/builder-vite": "^0.1.28",
    "@storybook/react": "^6.5.0-alpha.62",
    "@storybook/testing-library": "^0.0.9",
    "babel-loader": "^8.2.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "vite": "^2.9.4"
  },
  "dependencies": {},
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  }
}

IanVS · 2022-04-14T03:44:24Z

Thanks for the reproduction, @thadeucity. Using it, I've traced this down to 6.4 not including a fix that is in the 6.5 alphas: #17875.

One workaround you can use for now, is to enable storyStoreV7, which won't have this problem, and honestly is better to use anyway. One other thing I noticed is that your story is named Button.story.tsx, which won't match the glob you have set up in main.js.

IanVS · 2022-04-14T04:54:36Z

@gwvt @thadeucity, can you please try upgrading to storybook 6.4.22? (npx sb@next upgrade). It does the trick in the reproduction, so I think you should be good to go now. Let me know if you still have any trouble.

IanVS · 2022-04-14T04:56:50Z

Oh, and to create a new project, instead of manually installing vite and react separately as you show above, you can use:

 npm create vite@latest

Then, follow the prompts, and when done, you can

npx sb@next init

Which should get you up-and-running with a 6.5.0-alpha (or beta soon) version of storybook.

thadeucity · 2022-04-14T12:13:30Z

Thank you for your help @IanVS

For the sample project just updating the dependencies with npx sb@next upgrade worked for me! Thank you!!

But, for creating a new project I'm getting the same error I listed before (TypeError: reactDomClient.createRoot is not a function)

npm create vite@latest

// Project-name: vite-project
// Select a framework: react
// Select a variant: react-ts

npx sb@next init

yarn install

yarn storybook

I was able to solve the error downgrading storybook from 6.5.0-alpha.63 to 6.4.22 I seems that 6.5.0-alpha.60 or higher doesn't have the react 18 fix

Thank you again for the help

thadeucity · 2022-04-14T12:22:36Z

Updated the bug repo with the bug described above: (the bug is fixable downgrading @storybook/* to 6.4.22)
https://github.com/thadeucity/storybook-vite-bug

gwvt · 2022-04-14T16:58:23Z

@IanVS npx sb@next upgrade works! Thank you very much for your help.

IanVS · 2022-04-17T01:55:07Z

@thadeucity thanks for reporting the error. I have a PR up which should fix it. #17987

joungskim · 2022-08-29T20:42:39Z

I'm not sure if this will help anyone, but I spent a day with this exact same issue. I believe if you are on a Windows machine the case sensitivity of the path in power shell specifically matters. This caused the issue where the casing was mismatched and gave me this error. When I went back and tabbed through each of the folders within the path, it fixed the issue.

RodneyReid · 2023-02-22T05:06:50Z

Thanks @joungskim - that worked! And yes, I was tearing my hair out all day with this issue (it's 11pm here and just got it working)

francoisromain added bug needs triage labels Feb 14, 2022

IanVS assigned IanVS and unassigned IanVS Mar 10, 2022

IanVS closed this as completed Mar 10, 2022

IanVS added the builder-vite label Apr 14, 2022

IanVS reopened this Apr 14, 2022

IanVS mentioned this issue Apr 14, 2022

Core: Avoid framework imports from core/client #17875

Merged

3 tasks

IanVS closed this as completed Apr 14, 2022

reizt mentioned this issue Feb 19, 2023

Storybookにて: Uncaught Error: Singleton client API not yet initialized, cannot call addArgTypesEnhancer. reizt/tech-accel#15

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught Error: Singleton client API not yet initialized, cannot call `addArgTypesEnhancer`. with 6.5.0-alpha.39 #17504

Uncaught Error: Singleton client API not yet initialized, cannot call `addArgTypesEnhancer`. with 6.5.0-alpha.39 #17504

francoisromain commented Feb 14, 2022 •

edited

geisterfurz007 commented Mar 5, 2022 •

edited

jaminellis commented Mar 10, 2022 •

edited

IanVS commented Mar 10, 2022

francoisromain commented Mar 10, 2022 •

edited

IanVS commented Mar 10, 2022

geisterfurz007 commented Mar 11, 2022

gwvt commented Apr 13, 2022

IanVS commented Apr 13, 2022

gwvt commented Apr 13, 2022

IanVS commented Apr 13, 2022

thadeucity commented Apr 13, 2022 •

edited

thadeucity commented Apr 13, 2022 •

edited

IanVS commented Apr 13, 2022

thadeucity commented Apr 13, 2022 •

edited

IanVS commented Apr 14, 2022

IanVS commented Apr 14, 2022

IanVS commented Apr 14, 2022

thadeucity commented Apr 14, 2022

thadeucity commented Apr 14, 2022 •

edited

gwvt commented Apr 14, 2022

IanVS commented Apr 17, 2022

joungskim commented Aug 29, 2022 •

edited

RodneyReid commented Feb 22, 2023

Uncaught Error: Singleton client API not yet initialized, cannot call addArgTypesEnhancer. with 6.5.0-alpha.39 #17504

Uncaught Error: Singleton client API not yet initialized, cannot call addArgTypesEnhancer. with 6.5.0-alpha.39 #17504

Comments

francoisromain commented Feb 14, 2022 • edited

geisterfurz007 commented Mar 5, 2022 • edited

jaminellis commented Mar 10, 2022 • edited

IanVS commented Mar 10, 2022

francoisromain commented Mar 10, 2022 • edited

IanVS commented Mar 10, 2022

geisterfurz007 commented Mar 11, 2022

gwvt commented Apr 13, 2022

IanVS commented Apr 13, 2022

gwvt commented Apr 13, 2022

IanVS commented Apr 13, 2022

thadeucity commented Apr 13, 2022 • edited

thadeucity commented Apr 13, 2022 • edited

IanVS commented Apr 13, 2022

thadeucity commented Apr 13, 2022 • edited

IanVS commented Apr 14, 2022

IanVS commented Apr 14, 2022

IanVS commented Apr 14, 2022

thadeucity commented Apr 14, 2022

thadeucity commented Apr 14, 2022 • edited

gwvt commented Apr 14, 2022

IanVS commented Apr 17, 2022

joungskim commented Aug 29, 2022 • edited

RodneyReid commented Feb 22, 2023

Uncaught Error: Singleton client API not yet initialized, cannot call `addArgTypesEnhancer`. with 6.5.0-alpha.39 #17504

Uncaught Error: Singleton client API not yet initialized, cannot call `addArgTypesEnhancer`. with 6.5.0-alpha.39 #17504

francoisromain commented Feb 14, 2022 •

edited

geisterfurz007 commented Mar 5, 2022 •

edited

jaminellis commented Mar 10, 2022 •

edited

francoisromain commented Mar 10, 2022 •

edited

thadeucity commented Apr 13, 2022 •

edited

thadeucity commented Apr 13, 2022 •

edited

thadeucity commented Apr 13, 2022 •

edited

thadeucity commented Apr 14, 2022 •

edited

joungskim commented Aug 29, 2022 •

edited