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

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.

https://github.com/chromaui/chromatic-cli/issues/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! }

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 30
Comments: 19 (2 by maintainers)

Commits related to this issue

chore:pending https://github.com/storybookjs/storybook/issues/18801 — committed to deepberry/titan-web-components by iRuxu 2 years ago
Revert to yarn node_modules linker. Fixes story book build. There is some issue with story book being unable to build in yarn plug n play mode seems related to babel dependecy resolution https://gith... — committed to kevzettler/react-regl by kevzettler a year ago

Most upvoted comments

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: [ ] 
}

+101

lukesiedle on Jul 28, 2022

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.

+10

ColmBhandal on Aug 9, 2022

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

bryanhidalgo on Oct 26, 2022

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.

rosskevin on Aug 10, 2022

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

Rutulpatel7077 on Feb 18, 2023

Changing

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

fixed it for me

mzehetho on Aug 11, 2022

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 https://github.com/chromaui/chromatic-cli/issues/618

icarocapobianco on Jul 27, 2022

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

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

Jero786 on Dec 23, 2022

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.

janaagaard75 on Oct 3, 2022