[Bug] [vite] Uncaught TypeError: Cannot read properties of undefined (reading 'custom') at .yarn/cache/object-inspect-npm-1.12.2-f125a822c0-a534fc1b85.zip/node_modules/object-inspect/index.js (index.js:69:33)

[fivaz]

What version of vite are you using?

^2.9.9

System info and storybook versions

System:
OS: Windows 10 10.0.22621
CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12600K
Binaries:
Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
Yarn: 3.2.1 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.12.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22621.160.0), Chromium (103.0.1264.37)

"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-docs": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-interactions": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/builder-vite": "^0.1.38",
"@storybook/core-common": "^6.5.9",
"@storybook/node-logger": "^6.5.9",
"@storybook/react": "^6.5.9",
"@storybook/testing-library": "^0.0.13",

Describe the Bug

When using Yarn PnP with Storybook in a Vite project I get this error when running yarn storybook.

Uncaught TypeError: Cannot read properties of undefined (reading 'custom') at .yarn/cache/object-inspect-npm-1.12.2-f125a822c0-a534fc1b85.zip/node_modules/object-inspect/index.js (index.js:69:33) at __require2 (chunk-CCD2FOVN.js?v=5a6567aa:18:50) at .yarn/cache/side-channel-npm-1.0.4-e1f38b9e06-351e41b947.zip/node_modules/side-channel/index.js (index.js:5:15) at __require2 (chunk-CCD2FOVN.js?v=5a6567aa:18:50) at .yarn/cache/qs-npm-6.11.0-caf1bc9dea-6e1f29dd53.zip/node_modules/qs/lib/stringify.js (stringify.js:3:22) at __require2 (chunk-CCD2FOVN.js?v=5a6567aa:18:50) at .yarn/cache/qs-npm-6.11.0-caf1bc9dea-6e1f29dd53.zip/node_modules/qs/lib/index.js (index.js:3:17) at __require2 (chunk-CCD2FOVN.js?v=5a6567aa:18:50) at UrlStore.js:30:16

In the minimal reproducible example I just did :

yarn create vite my-vue-app --template react-ts // to create a vite project with react typescript

yarn set version berry // to set yarn version to Yarn v2

then I made sure that wasn't any nodeLinker: node-modules in my .yarnrc.yml so PnP was truly activated

npx storybook init // to install Storybook

PS: I had many errors before about undeclared peerDependencies :

• @storybook/core-common
• @storybook/node-logger
  and missing dependencies :
• @storybook/preview-web,
• @storybook/addon-docs,
• @storybook/client-api,
• @storybook/addon-backgrounds,
• @storybook/addon-measure,
• @storybook/addon-outline,
• @storybook/channel-postmessage,
• @storybook/channel-websocket,
• @storybook/addons

but I managed to solve those problems installing them as dependencies of my project.
yarn add -D @storybook/core-common @storybook/node-logger @storybook/preview-web ...

Link to Minimal Reproducible Example

https://github.com/fivaz/react-storybook-vue

Participation

• I am willing to submit a pull request for this issue.

[IanVS]

Thanks for the issue and reproduction. Unfortunately, this project doesn't work terribly well with yarn pnp (see #141), and I think vite itself has some challenges with it as well. I'm happy to review any PRs from anyone who's willing to dig in and find solutions, though. As part of the upcoming storybook 7.0, there's a chance that this project will move into the main storybook monorepo, which may help some of these dependency issues.

[JobiJoba]

I got the same issue but with PNPM

[andrewdoro]

but I managed to solve those problems installing them as dependencies of my project. yarn add -D @storybook/core-common @storybook/node-logger

I am also having the same error with PNPM. Adding those two dependencies didn't fix my problem.

[JobiJoba]

Personally I had to install all those one with PNPM:

 "@storybook/preview-web": "6.5.9",
    "@storybook/addon-docs": "6.5.9",
    "@storybook/client-api": "6.5.9",
    "@storybook/addon-backgrounds": "6.5.9",
    "@storybook/addon-measure": "6.5.9",
    "@storybook/addon-outline": "6.5.9",
    "@storybook/channel-postmessage": "6.5.9",
    "@storybook/channel-websocket": "6.5.9",
    "@storybook/addons": "6.5.9",

[fivaz]

but I managed to solve those problems installing them as dependencies of my project. yarn add -D @storybook/core-common @storybook/node-logger

I am also having the same error with PNPM. Adding those two dependencies didn't fix my problem.

You need to install all dependencies that Storybook says it can't find when you try to open a story.

[fivaz]

I managed to make it work adding all those dependencies besides those I mention in the issue.

"@babel/types": "^7.18.7",
"@mdx-js/mdx": "^2.1.2",
"@mdx-js/react": "^2.1.2",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/mdx2-csf": "^0.0.3",
"supports-color": "^9.2.2",
"util": "^0.12.4",

PS: the style in the mdx file doesn't work, even breaking the line like this:
`
<style>
  {`
    ...
  `}
</style>

[fivaz]

for monorepositories another issue might appear:

Error: react-docgen-typescript tried to access typescript (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

You just have to install typescript in the root of the monorepository, (in my case I had typescript installed in each individual workspace, but not in the root package)

PS: you might also have to install the package util yarn add -D util in the root package too.

[rohanrajpal]

facing the

Personally I had to install all those one with PNPM:

 "@storybook/preview-web": "6.5.9",
    "@storybook/addon-docs": "6.5.9",
    "@storybook/client-api": "6.5.9",
    "@storybook/addon-backgrounds": "6.5.9",
    "@storybook/addon-measure": "6.5.9",
    "@storybook/addon-outline": "6.5.9",
    "@storybook/channel-postmessage": "6.5.9",
    "@storybook/channel-websocket": "6.5.9",
    "@storybook/addons": "6.5.9",

Faced the same issue with Pnpm, adding these dependencies manually helped!