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

[kevzettler]

Describe the bug

When I run build-storybook I am seeing the same error output behavior that is reported here: #18801 (comment)

The build-storybook hangs indefinitely and fails to terminate or complete.

I only see these errors when I use yarns 'plug n' play' mode or 'zero-installs'. If I change the yarn nodeLinker value to nodeLinker: node-modules then build-storybook works successfully.

I tried to follow the advice from #18801 (comment)
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 my case there is a module resolution issue possibly with the .babelrc storybook is processing

To Reproduce

I have created a reproduction repository here:
https://github.com/kevzettler/storybook-bug-example
This happens with the following dependencies
Node version v16.13.0
yarn -v
3.3.1

You can execute the following shell command sequence to setup the repo and trigger the failure case

git clone https://github.com/kevzettler/storybook-bug-example.git && cd storybook-bug-example && yarn install && yarn build-storybook

You can then execute npx sb@next upgrade --prerelease to see the upgrade failures.

Conversely you can edit .yarnrc.yml to enable nodeLinker: node-modules and see the success case

System

Environment Info:

  System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 3.3.1 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Safari: 15.5

Additional context

No response

[IanVS]

@yannbf could this be an issue with the babel migration in yarn pnp?

[ndelangen]

This might a problem:

info @storybook/addon-options ^5.3.21 → ^6.0.0-alpha.29

[ndelangen]

I don't know if this is something you'd have access to @kevzettler :
https://ndelangen-glorious-guide-4gpxjv4vp5394j.github.dev/

But I got it to generate pnp files.. though it failed to install due to missing prebuilt:

log:

# This file contains the result of Yarn building a package (gl@npm:4.9.2)
# Script name: install

prebuild-install WARN install No prebuilt binaries found (target=19.5.0 runtime=node arch=x64 libc= platform=linux)
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | linux | x64
gyp info find Python using Python version 3.10.4 found at "/home/codespace/.python/current/bin/python3"
gyp ERR! UNCAUGHT EXCEPTION 
gyp ERR! stack TypeError: Cannot assign to read only property 'cflags' of object '#<Object>'
gyp ERR! stack     at createConfigFile (/workspaces/storybook-bug-example/.yarn/unplugged/node-gyp-npm-7.1.2-002c5798eb/node_modules/node-gyp/lib/configure.js:117:21)
gyp ERR! stack     at /workspaces/storybook-bug-example/.yarn/unplugged/node-gyp-npm-7.1.2-002c5798eb/node_modules/node-gyp/lib/configure.js:84:9
gyp ERR! stack     at /workspaces/storybook-bug-example/.pnp.cjs:17916:13
gyp ERR! System Linux 5.4.0-1100-azure
gyp ERR! command "/usr/local/share/nvm/versions/node/v19.5.0/bin/node" "/workspaces/storybook-bug-example/.yarn/unplugged/node-gyp-npm-7.1.2-002c5798eb/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /workspaces/storybook-bug-example/.yarn/unplugged/gl-npm-4.9.2-431907383a/node_modules/gl
gyp ERR! node -v v19.5.0
gyp ERR! node-gyp -v v7.1.2
gyp ERR! Node-gyp failed to build your package.
gyp ERR! Try to update npm and/or node-gyp and if it does not help file an issue with the package author.

[kevzettler]

@ndelangen

This might a problem:

info @storybook/addon-options ^5.3.21 → ^6.0.0-alpha.29

I tried removing this with yarn remove @storybook/addon-options and the issue remained.

I don't know if this is something you'd have access to @kevzettler :
https://ndelangen-glorious-guide-4gpxjv4vp5394j.github.dev/

I cannot access this

That gl build error...

# This file contains the result of Yarn building a package (gl@npm:4.9.2)

is probably related to
regl-project/regl#655