TypeError: The "id" argument must be of type string. Received an instance of Object #18801

asasvirtuais · 2022-07-27T19:56:04Z

After running storybook-start or build-sb I get the following

The error doesn't stop the execution and after a few seconds I get to use storybook or build it. Unfortunately this might relate to Chromatic which I am trying to use.

chromaui/chromatic-cli#618

ERR! TypeError: The "id" argument must be of type string. Received an instance of Object
ERR!     at new NodeError (node:internal/errors:371:5)
ERR!     at validateString (node:internal/validators:119:11)
ERR!     at Module.require (node:internal/modules/cjs/loader:998:3)    
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at interopRequireDefault (C:\Users\icaro\Desktop\code\gsg\gsg-workspace\node_modules\.pnpm\@storybook+core-common@6.5.9_6mntlpnkhn6c7tucibhqtuw2yq\node_modules\@storybook\core-common\dist\cjs\presets.js:178:16)
ERR!     at getContent (C:\Users\icaro\Desktop\code\gsg\gsg-workspace\node_modules\.pnpm\@storybook+core-common@6.5.9_6mntlpnkhn6c7tucibhqtuw2yq\node_modules\@storybook\core-common\dist\cjs\presets.js:194:10)     
ERR!     at loadPreset (C:\Users\icaro\Desktop\code\gsg\gsg-workspace\node_modules\.pnpm\@storybook+core-common@6.5.9_6mntlpnkhn6c7tucibhqtuw2yq\node_modules\@storybook\core-common\dist\cjs\presets.js:203:20)     
ERR!     at C:\Users\icaro\Desktop\code\gsg\gsg-workspace\node_modules\.pnpm\@storybook+core-common@6.5.9_6mntlpnkhn6c7tucibhqtuw2yq\node_modules\@storybook\core-common\dist\cjs\presets.js:256:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (C:\Users\icaro\Desktop\code\gsg\gsg-workspace\node_modules\.pnpm\@storybook+core-common@6.5.9_6mntlpnkhn6c7tucibhqtuw2yq\node_modules\@storybook\core-common\dist\cjs\presets.js:255:18)    
ERR!  TypeError: The "id" argument must be of type string. Received an 
instance of Object
ERR!     at new NodeError (node:internal/errors:371:5)
ERR!     at validateString (node:internal/validators:119:11)
ERR!     at Module.require (node:internal/modules/cjs/loader:998:3)    
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at interopRequireDefault (C:\Users\icaro\Desktop\code\gsg\gsg-workspace\node_modules\.pnpm\@storybook+core-common@6.5.9_6mntlpnkhn6c7tucibhqtuw2yq\node_modules\@storybook\core-common\dist\cjs\presets.js:178:16)
ERR!     at getContent (C:\Users\icaro\Desktop\code\gsg\gsg-workspace\node_modules\.pnpm\@storybook+core-common@6.5.9_6mntlpnkhn6c7tucibhqtuw2yq\node_modules\@storybook\core-common\dist\cjs\presets.js:194:10)     
ERR!     at loadPreset (C:\Users\icaro\Desktop\code\gsg\gsg-workspace\node_modules\.pnpm\@storybook+core-common@6.5.9_6mntlpnkhn6c7tucibhqtuw2yq\node_modules\@storybook\core-common\dist\cjs\presets.js:203:20)     
ERR!     at C:\Users\icaro\Desktop\code\gsg\gsg-workspace\node_modules\.pnpm\@storybook+core-common@6.5.9_6mntlpnkhn6c7tucibhqtuw2yq\node_modules\@storybook\core-common\dist\cjs\presets.js:256:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (C:\Users\icaro\Desktop\code\gsg\gsg-workspace\node_modules\.pnpm\@storybook+core-common@6.5.9_6mntlpnkhn6c7tucibhqtuw2yq\node_modules\@storybook\core-common\dist\cjs\presets.js:255:18) {  
ERR!   code: 'ERR_INVALID_ARG_TYPE'
ERR! }

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

asasvirtuais · 2022-07-27T20:40:38Z

I added the following to debug and workaround the issue.

@storybook\core-common\dist\cjs\presets.js:178

function interopRequireDefault(filePath) {
  // Log was giving me { type: "presets", name: undefined }
  console.log(filePath)
  // So I skipped that one
  if ( filePath.type === 'presets' && undefined === filePath.name ) {
    return {}
  }
  // eslint-disable-next-line global-require,import/no-dynamic-require
  var result = require(filePath);

  var isES6DefaultExported = typeof result === 'object' && result !== null && typeof result.default !== 'undefined';
  return isES6DefaultExported ? result.default : result;
}

This also fixed my issue with chromatic chromaui/chromatic-cli#618

lukesiedle · 2022-07-28T14:11:20Z

Had the same issue (using vite), but turned out to be an addon defined in .storybook/main.js that I had actually removed from dependencies. Removing the addon from here solved the issue.

module.exports = {
  ...,
  addons: [ ] 
}

ColmBhandal · 2022-08-09T12:40:37Z

Given @lukesiedle's discovery, it would be helpful if running Storybook failed with a more informative error in the case where an addon is used and that addon does not exist as a dependency in the project. E.g. something like:

WARNING: Addon X is defined in ...path/main.js/module.exports but does not exist as a dependency in this project. The addon will be skipped.

I believe the fix could be implemented in presets.ts, int the function resolveAddonName. At the end of that function, it happily resolves a non-existent addon to the object:

    return {
      type: 'presets',
      name: undefined
    };

Since the name comes back as undefined, it doesn't get output in JSON.stringify when the error is logged downstream in the function loadPreset:

catch (e: any) {
    const warning =
      level > 0
        ? `  Failed to load preset: ${JSON.stringify(input)} on level ${level}`
        : `  Failed to load preset: ${JSON.stringify(input)}`;

    logger.warn(warning);
    logger.error(e);

    return [];
  }

For me, this results in this warning in my console:

info => Loading presets
WARN   Failed to load preset: {"type":"presets"} on level 1

A failure further upstream in resolveAddonName would have access to the original name it was trying to resolve and could print a more informative error/warning to the log.

rosskevin · 2022-08-10T18:15:30Z

Agreed, as I was migrating our addon to 7.0.0-alpha.18, I forgot to change (inside the addon project)

- addons: ["../preset.js", "@storybook/addon-essentials"],
+ addons: ["../manager.js", "@storybook/addon-essentials"],

So this error bubbled up. A more informative message would indeed be helpful.

sophher · 2022-08-11T07:33:39Z

Changing

- addons: ['@storybook/addon-links/preset'],
+ addons: ['@storybook/addon-links'],

fixed it for me

robespmun · 2022-09-16T10:25:25Z

Changing

- addons: ['@storybook/addon-links/preset'],
+ addons: ['@storybook/addon-links'],

fixed it for me

Fixed it for me too! Thanks for the tip

janaagaard75 · 2022-10-03T10:13:24Z

We had this issue because addons: ["@storybook-react-i18next"] should have been written addons: ["storybook-react-i18next"]. The misconfiguration wasn't reported with Storybook 6.5.9, but it became apparent with version 6.5.12.

BibhushanKarki · 2022-10-18T05:38:56Z

I'm using storybook v6.5.12. I'm getting this same error. How to fix this?

EricDeColS · 2022-10-19T21:11:47Z

It just started happening to me, it broke down earlier, I made it work again, wento to work, came back to my personal project without touching a finger on it, and now it's just broken

Edit: Hey, if you are using react above 17, webpack 5 compatibility and so on, get rid of '@storybook-addon-designs' if you have it, just solved my problem.

bryanhidalgo · 2022-10-26T18:40:55Z

I had the same issue with @storybook/preset-create-react-app, I removed it and that fixed it.

hyeongrok7874 · 2022-11-09T15:10:07Z

I had the same issue with @storybook/preset-create-react-app, I removed it and that fixed it.

Thanks I solved it 😍

robksawyer · 2022-11-23T01:13:41Z

I removed @whitespace/storybook-addon-html and it worked for me.

LordZombi · 2022-12-02T11:22:23Z

Error message is really confusing.
Point is to have installed (listed in your package.json) all the addons you are using in storybook.
So I think proper fix is just update an error message.

Jero786 · 2022-12-23T20:46:40Z

I needed to remove both add-ons in order to avoid that error

"@storybook/preset-create-react-app",
"@storybook/addon-a11y"

shilman · 2023-01-13T16:21:23Z

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.26 containing PR #20455 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

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

kevzettler · 2023-01-31T04:23:05Z

I am getting this issue only when I use yarns plug n play mode. If I install dependencies to node_modules I get this error

I have tried following @shilman suggestion and try upgrading with
npx sb@next upgrade --prerelease

However the upgrade process then fails at the babel migration step with error:

✅ ran autodocsTrue migration
⚠️  failed to check fix missing-babelrc
node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/plugin-proposal-class-properties' imported from /Users/kevzettler/code/react-regl/babel-virtual-resolve-base.js
    at new NodeError (/Users/kevzettler/.npm/_npx/eebb2d3a7d26a7f1/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2240:5)
    at packageResolve (/Users/kevzettler/.npm/_npx/eebb2d3a7d26a7f1/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2776:9)
    at moduleResolve (/Users/kevzettler/.npm/_npx/eebb2d3a7d26a7f1/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2804:18)
    at defaultResolve (/Users/kevzettler/.npm/_npx/eebb2d3a7d26a7f1/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2835:13)
    at /Users/kevzettler/.npm/_npx/eebb2d3a7d26a7f1/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2855:14
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/kevzettler/.npm/_npx/eebb2d3a7d26a7f1/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:45:103)
    at _next (/Users/kevzettler/.npm/_npx/eebb2d3a7d26a7f1/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:46:194)
    at /Users/kevzettler/.npm/_npx/eebb2d3a7d26a7f1/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:46:364
    at new Promise (<anonymous>) {
  code: 'ERR_MODULE_NOT_FOUND'
}

furthermore, if I revert and then use execute npx sb@next upgrade --prerelease while using yarns nodeLinker :node-modules mode. It passes successfully.

This leads me to believe in mycase there is a module resolution issue possibly with the .babelrc storybook is processing

There is some issue with story book being unable to build in yarn plug n play mode seems related to babel dependecy resolution storybookjs/storybook#18801 (comment)

IanVS · 2023-01-31T12:57:48Z

@kevzettler would you mind opening a new issue with a reproduction that we can take a look into?

kevzettler · 2023-01-31T17:45:37Z

@IanVS I have opened a bug at: #20861

Rutulpatel7077 · 2023-02-18T00:58:05Z

@shilman Looks like npx sb@next upgrade --prerelease fixes issues with Yarn PnP

asasvirtuais added bug needs triage labels Jul 27, 2022

asasvirtuais mentioned this issue Jul 27, 2022

TypeError: The "id" argument must be of type string. Received an instance of Object chromaui/chromatic-cli#618

Closed

iRuxu added a commit to deepberry/titan-web-components that referenced this issue Aug 10, 2022

chore:pending storybookjs/storybook#18801

8ad19ba

interphased mentioned this issue Nov 2, 2022

Addon tab not shown in Storybook v7 storybookjs/addon-designs#171

Closed

11 tasks

IanVS self-assigned this Dec 30, 2022

IanVS mentioned this issue Dec 30, 2022

Addons: Warn when addon is not installed #20455

Merged

3 tasks

shilman closed this as completed Jan 13, 2023

kevzettler mentioned this issue Jan 31, 2023

[Bug]: Storybook fails to resolve yarn Plug N Play, (Babel?) dependencies #20861

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: The "id" argument must be of type string. Received an instance of Object #18801

TypeError: The "id" argument must be of type string. Received an instance of Object #18801

asasvirtuais commented Jul 27, 2022

asasvirtuais commented Jul 27, 2022 •

edited

Loading

lukesiedle commented Jul 28, 2022

ColmBhandal commented Aug 9, 2022 •

edited

Loading

rosskevin commented Aug 10, 2022

sophher commented Aug 11, 2022

robespmun commented Sep 16, 2022

janaagaard75 commented Oct 3, 2022

BibhushanKarki commented Oct 18, 2022

EricDeColS commented Oct 19, 2022 •

edited

Loading

bryanhidalgo commented Oct 26, 2022 •

edited

Loading

hyeongrok7874 commented Nov 9, 2022

robksawyer commented Nov 23, 2022

LordZombi commented Dec 2, 2022

Jero786 commented Dec 23, 2022

shilman commented Jan 13, 2023

kevzettler commented Jan 31, 2023 •

edited

Loading

IanVS commented Jan 31, 2023

kevzettler commented Jan 31, 2023

Rutulpatel7077 commented Feb 18, 2023

TypeError: The "id" argument must be of type string. Received an instance of Object #18801

TypeError: The "id" argument must be of type string. Received an instance of Object #18801

Comments

asasvirtuais commented Jul 27, 2022

asasvirtuais commented Jul 27, 2022 • edited Loading

lukesiedle commented Jul 28, 2022

ColmBhandal commented Aug 9, 2022 • edited Loading

rosskevin commented Aug 10, 2022

sophher commented Aug 11, 2022

robespmun commented Sep 16, 2022

janaagaard75 commented Oct 3, 2022

BibhushanKarki commented Oct 18, 2022

EricDeColS commented Oct 19, 2022 • edited Loading

bryanhidalgo commented Oct 26, 2022 • edited Loading

hyeongrok7874 commented Nov 9, 2022

robksawyer commented Nov 23, 2022

LordZombi commented Dec 2, 2022

Jero786 commented Dec 23, 2022

shilman commented Jan 13, 2023

kevzettler commented Jan 31, 2023 • edited Loading

IanVS commented Jan 31, 2023

kevzettler commented Jan 31, 2023

Rutulpatel7077 commented Feb 18, 2023

asasvirtuais commented Jul 27, 2022 •

edited

Loading

ColmBhandal commented Aug 9, 2022 •

edited

Loading

EricDeColS commented Oct 19, 2022 •

edited

Loading

bryanhidalgo commented Oct 26, 2022 •

edited

Loading

kevzettler commented Jan 31, 2023 •

edited

Loading