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

Issue Analytics

State:
Created a year ago
Reactions:19
Comments:14

Top GitHub Comments

56reactions

lukesiedlecommented, Jul 28, 2022

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

7reactions

ColmBhandalcommented, Aug 9, 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.

Top Results From Across the Web

The "id" argument must be of type string. Received type object

As I created my first app and run, I got this error. TypeError [ERR_INVALID_ARG_TYPE]: The " ...

err! typeerror [err_invalid_arg_type]: the "id" argument must be ...

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object.

The first argument must be of type string or an instance of ...

Coding example for the question [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer. when using admin.auth().

“storybook TypeError [ERR_INVALID_ARG_TYPE]: The "id ...

Received an instance of Object node · TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received function requireAuth ...

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument ...

Big bad error: ERR_INVALID_ARG_TYPE { TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received type undefined at validateString ...