Storybook doesn't work with yarn PnP

[jpzwarte]

So when using yarn PnP, start-storybook won't work because of incorrect dependencies. The following is required to even start:

packageExtensions:
  "babel-loader@*":
    dependencies:
      "@babel/core": "^7"
  "@storybook/router@*":
    dependencies:
      "util": "^0.12.4"
  "@storybook/ui@*":
    dependencies:
      "util": "^0.12.4"
  "@storybook/web-components@*":
    dependencies:
      "babel-loader": "^8"

After this, it will start, but it will hang (using the webpack5 builder). I'm still creating this issue, so the info does not get lost.

[davidcalhoun]

Seeing something similar. Using Yarn PnP here as well. Updating from Storybook 6.4.19 to 6.5.9 resulted in this error when starting Storybook:

manager (webpack 5.69.1) compiled successfully in 14186 ms
WARN Force closed manager build
ModuleBuildError: Module build failed (from ../../.yarn/__virtual__/babel-loader-virtual-6ac62b9973/0/cache/babel-loader-npm-8.2.3-855681b984-78e1e1a919.zip/node_modules/babel-loader/lib/index.js):
Error: babel-loader tried to access @babel/core (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

Required package: @babel/core
Required by: babel-loader@virtual:26f6be317f9b43f1d4ed40d9812b70c3c2a40769828117da02037796f733b97dd261e627932060655383b505c4c516704d7187228a62d3818d750f54341ae09f#npm:8.2.3 (via /Users/[REDACTED]/.yarn/__virtual__/babel-loader-virtual-6ac62b9973/0/cache/babel-loader-npm-8.2.3-855681b984-78e1e1a919.zip/node_modules/babel-loader/lib/)

Ancestor breaking the chain: @storybook/addon-docs@virtual:6c881bc1014ff7dbd40675d161633938bbbbde2efdc1af0eb91101cb2b25f5a720bae0ddff62e18713864ceb6507c57bba94ac2124588fb0dfc4f32aede12ec5#npm:6.5.9


Require stack:
- /Users/[REDACTED]/.yarn/__virtual__/babel-loader-virtual-6ac62b9973/0/cache/babel-loader-npm-8.2.3-855681b984-78e1e1a919.zip/node_modules/babel-loader/lib/index.js
- /Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/loadLoader.js
- /Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/[REDACTED]/.yarn/__virtual__/webpack-virtual-67b9bc3315/0/cache/webpack-npm-5.69.1-e85947ca9d-490a6e9e4c.zip/node_modules/webpack/lib/NormalModule.js
- /Users/[REDACTED]/.yarn/__virtual__/webpack-virtual-67b9bc3315/0/cache/webpack-npm-5.69.1-e85947ca9d-490a6e9e4c.zip/node_modules/webpack/lib/HotModuleReplacementPlugin.js
- /Users/[REDACTED]/.yarn/__virtual__/webpack-virtual-67b9bc3315/0/cache/webpack-npm-5.69.1-e85947ca9d-490a6e9e4c.zip/node_modules/webpack/lib/index.js
- /Users/[REDACTED]/.yarn/__virtual__/@storybook-builder-webpack5-virtual-1f3c3906c2/0/cache/@storybook-builder-webpack5-npm-6.5.9-c88035ede9-28d8f77de5.zip/node_modules/@storybook/builder-webpack5/dist/cjs/index.js
- /Users/[REDACTED]/.yarn/__virtual__/@storybook-core-server-virtual-b7b90b5efa/0/cache/@storybook-core-server-npm-6.5.9-c2be4899b4-c91a364e37.zip/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js
- /Users/[REDACTED]/.yarn/__virtual__/@storybook-core-server-virtual-b7b90b5efa/0/cache/@storybook-core-server-npm-6.5.9-c2be4899b4-c91a364e37.zip/node_modules/@storybook/core-server/dist/cjs/build-static.js
- /Users/[REDACTED]/.yarn/__virtual__/@storybook-core-server-virtual-b7b90b5efa/0/cache/@storybook-core-server-npm-6.5.9-c2be4899b4-c91a364e37.zip/node_modules/@storybook/core-server/dist/cjs/index.js
- /Users/[REDACTED]/.yarn/__virtual__/@storybook-core-virtual-e5f7d34094/0/cache/@storybook-core-npm-6.5.9-9915411b3a-6c644bbba0.zip/node_modules/@storybook/core/dist/cjs/server.js
- /Users/[REDACTED]/.yarn/__virtual__/@storybook-core-virtual-e5f7d34094/0/cache/@storybook-core-npm-6.5.9-9915411b3a-6c644bbba0.zip/node_modules/@storybook/core/server.js
- /Users/[REDACTED]/.yarn/__virtual__/@storybook-react-virtual-8aea62358d/0/cache/@storybook-react-npm-6.5.9-c664590bb8-63c72547bb.zip/node_modules/@storybook/react/dist/cjs/server/index.js
- /Users/[REDACTED]/.yarn/__virtual__/@storybook-react-virtual-8aea62358d/0/cache/@storybook-react-npm-6.5.9-c664590bb8-63c72547bb.zip/node_modules/@storybook/react/bin/index.js
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
    at Function.require$$0.Module._resolveFilename (/Users/[REDACTED]/.pnp.cjs:45437:13)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (/Users/[REDACTED]/.yarn/cache/@cspotcode-source-map-support-npm-0.8.1-964f2de99d-5718f26708.zip/node_modules/@cspotcode/source-map-support/source-map-support.js:811:30)
    at Function.require$$0.Module._load (/Users/[REDACTED]/.pnp.cjs:45291:42)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/[REDACTED]/.yarn/__virtual__/babel-loader-virtual-6ac62b9973/0/cache/babel-loader-npm-8.2.3-855681b984-78e1e1a919.zip/node_modules/babel-loader/lib/index.js:10:11)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at require$$0.Module._extensions..js (/Users/[REDACTED]/.pnp.cjs:45481:33)
    at Object.require.extensions.<computed> [as .js] (/Users/[REDACTED]/.yarn/__virtual__/ts-node-virtual-f3da5e10fb/0/cache/ts-node-npm-10.8.1-24280b0982-7d1aa7aa3a.zip/node_modules/ts-node/src/index.ts:1587:43)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.require$$0.Module._load (/Users/[REDACTED]/.pnp.cjs:45321:14)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadLoader (/Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/loadLoader.js:19:17)
    at iteratePitchingLoaders (/Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/LoaderRunner.js:182:2)
    at processResult (/Users/[REDACTED]/.yarn/__virtual__/webpack-virtual-67b9bc3315/0/cache/webpack-npm-5.69.1-e85947ca9d-490a6e9e4c.zip/node_modules/webpack/lib/NormalModule.js:753:19)
    at /Users/[REDACTED]/.yarn/__virtual__/webpack-virtual-67b9bc3315/0/cache/webpack-npm-5.69.1-e85947ca9d-490a6e9e4c.zip/node_modules/webpack/lib/NormalModule.js:855:5
    at /Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/LoaderRunner.js:185:11
    at loadLoader (/Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/loadLoader.js:33:11)
    at iteratePitchingLoaders (/Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/LoaderRunner.js:182:2)
    at iteratePitchingLoaders (/Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/LoaderRunner.js:178:10)
    at /Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/LoaderRunner.js:189:18
    at handleResult (/Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/loadLoader.js:53:2)
    at loadLoader (/Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/loadLoader.js:35:10)
    at iteratePitchingLoaders (/Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/LoaderRunner.js:182:2)
    at runLoaders (/Users/[REDACTED]/.yarn/cache/loader-runner-npm-4.2.0-427f0e7134-e61aea8b69.zip/node_modules/loader-runner/lib/LoaderRunner.js:397:2)
    at NormalModule._doBuild (/Users/[REDACTED]/.yarn/__virtual__/webpack-virtual-67b9bc3315/0/cache/webpack-npm-5.69.1-e85947ca9d-490a6e9e4c.zip/node_modules/webpack/lib/NormalModule.js:814:3)
    at NormalModule.build (/Users/[REDACTED]/.yarn/__virtual__/webpack-virtual-67b9bc3315/0/cache/webpack-npm-5.69.1-e85947ca9d-490a6e9e4c.zip/node_modules/webpack/lib/NormalModule.js:958:15)
    at /Users/[REDACTED]/.yarn/__virtual__/webpack-virtual-67b9bc3315/0/cache/webpack-npm-5.69.1-e85947ca9d-490a6e9e4c.zip/node_modules/webpack/lib/Compilation.js:1370:12
    at NormalModule.needBuild (/Users/[REDACTED]/.yarn/__virtual__/webpack-virtual-67b9bc3315/0/cache/webpack-npm-5.69.1-e85947ca9d-490a6e9e4c.zip/node_modules/webpack/lib/NormalModule.js:1247:32)
ModuleBuildError: Module build failed (from ../../.yarn/__virtual__/babel-loader-virtual-6ac62b9973/0/cache/babel-loader-npm-8.2.3-855681b984-78e1e1a919.zip/node_modules/babel-loader/lib/index.js):

This works for me as a workaround:

# .yarnrc.yml
packageExtensions:
  "@storybook/addon-docs@*":
    dependencies:
      "@babel/core": "*"

[ld210]

Storybook with Angular doesn't work either with Yarn PnP. First, it uses node_modules folder for caching, then this error :

Error: EROFS: read-only filesystem, open '/node_modules/.ngcc_lock_file'
    at makeError$1 (/Users/tfassolis/Documents/Git/front-angular/.pnp.cjs:28968:24)
    at EROFS (/Users/tfassolis/Documents/Git/front-angular/.pnp.cjs:28995:10)
    at ZipFS.prepareWriteFile (/Users/tfassolis/Documents/Git/front-angular/.pnp.cjs:30780:13)
    at ZipFS.writeFileSync (/Users/tfassolis/Documents/Git/front-angular/.pnp.cjs:30764:53)
    at /Users/tfassolis/Documents/Git/front-angular/.pnp.cjs:31811:20
    at /Users/tfassolis/Documents/Git/front-angular/.pnp.cjs:32009:60
    at ZipOpenFS.getZipSync (/Users/tfassolis/Documents/Git/front-angular/.pnp.cjs:32138:14)
    at ZipOpenFS.makeCallSync (/Users/tfassolis/Documents/Git/front-angular/.pnp.cjs:32009:17)
    at ZipOpenFS.writeFileSync (/Users/tfassolis/Documents/Git/front-angular/.pnp.cjs:31808:17)
    at VirtualFS.writeFileSync (/Users/tfassolis/Documents/Git/front-angular/.pnp.cjs:31165:24) {
  code: 'EROFS'

[michaelfaith]

Storybook with Angular doesn't work either with Yarn PnP. First, it uses node_modules folder for caching, then this error :

Different error that this resolves, but they addressed a related issue on the Angular side last week: https://github.com/angular/angular-cli/pull/23487

[ld210]

Might be related, but i'm not sure. If there's no View Engine libraries found on the repo, NGCC will not try to write anything in a lock file.

[ld210]

Anyway, i opened an issue specifically for this bug, as it is not strictly related to the unlisted dependencies : https://github.com/storybookjs/storybook/issues/18626

[ld210]

@michaelfaith The Angular team has just release the v14.0.5, that includes https://github.com/angular/angular-cli/pull/23487 But that didn't solved anything for Storybook/angular, i'm still getting the same error.

[gigibean]

I faced the same issue using Storybook@^6.5.9, webpack5, react and Yarn berry workspace(yarn pnp), so it might be related to this problem.

Here's what I did:

• Addedresolutions in package.json (monorepo -> ./package.json)

"resolutions": {
    "@storybook/react/webpack": "^5"
  },

• Downgraded @storybook/addon-docs and installed @storybook/builder-webpack5, @storybook/manager-webpack5 (monorepo -> package.json in storybook application directory)

"devDependencies": {
    "@babel/core": "^7.18.6",
   ...
    "@storybook/addon-docs": "6.4.12",
    "@storybook/addon-essentials": "6.4.12",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-webpack5": "^6.5.9",
    "@storybook/manager-webpack5": "^6.5.9",
    "@storybook/react": "^6.5.9",
    ...
    "babel-loader": "^8.2.5",
  },

• Edited main.js config

...
core: {
    builder: 'webpack5',
  },
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
    });
    return config;
  },
...

[litan1106]

same. I am facing the same issue with storybook 6.5.10 with vite builder

[macrozone]

did run into the same,

https://github.com/storybookjs/storybook/issues/18435#issuecomment-1165672499 's workaround solved it

[ld210]

The workaround didn't solve the issue for me,

[maciej-gurban]

Using latest yarn with pnp, storybook on 6.5.x version and facing very similar issue for react setup. Seems like it's a bit early to jump on the yarn pnp wandwagon.

/redacted/component-library/.pnp.cjs:32892
  return Object.defineProperties(new Error(message), {
                                 ^

Error: Required package exists but could not be accessed (zip archive inconsistent). 

Missing package: @storybook/react@virtual:c0f3f378299853e085f237482644e02f8371d7e66889f7d3bd20c2c2a25c4731cfc21d40d7e0fce17528da61a9cd66734e08fc1a055f89f71fb4848bc43be03d#npm:6.5.16
Expected package location: /redacted/component-library/.yarn/__virtual__/@storybook-react-virtual-9319345346/0/cache/@storybook-react-npm-6.5.16-e176ae1aaf-c5396e748e.zip/node_modules/@storybook/react/

[ld210]

So, i pretty much gave up on Storybook since Angular 14. But since Angular 16 is ditching ngcc, i wanted to try again (as there is no alternatives to Storybook with Angular). And it works (Storybook 7.0.14). Couple things worth noting, though :

• I had to install some dependencies related to Webpack in my package.json devDependencies. I had to install file-system-cache, @babel/core, @types/babel__core and @types/express
• and i had to add these in the .yarnrc.yml file :

"@storybook/angular@*":
    dependencies:
      "@angular-devkit/architect": "*"
      "@angular-devkit/core": "*"

[valentinpalkovic]

Yarn PNP is working with the latest Storybook v8 version. Please file a new issue if you still have problems because the discussion in this issue surfaces multiple problems. I will close this for now.