CLI: Fix pnp support & add auto-detection

[ndelangen]

Fixes: #20405

Add auto-detection for pnp mode in storybook init CLI.

Also fix an critical issue where when pnp is enabled, the storybook CLI cannot find the renderer package; which it needs to copy templates from, into the user's newly created project, to serve as demo stories.

Related: (possibly fixes these)
#20861
#19764
#18626
#18625
#18435
#21004

[ndelangen]

All this flipping effort and when I try to generate the sandbox i still get this:

✅ Created internal/pnp in ./../repros/internal/pnp successfully in 47 s
🟢 install > 🟢 compile > ✅ publish > 🔊 run-registry > ✅ generate > 🔄 sandbox


🧶 Installing Yarn 2
> touch yarn.lock
> touch .yarnrc.yml
> yarn set version berry
➤ YN0000: Retrieving https://repo.yarnpkg.com/3.4.1/packages/yarnpkg-cli/bin/yarn.js
➤ YN0000: Saving the new release in .yarn/releases/yarn-3.4.1.cjs
➤ YN0000: Done in 0s 323ms
> yarn config set enableGlobalCache true
➤ YN0000: Successfully set enableGlobalCache to true
> yarn config set checksumBehavior ignore
➤ YN0000: Successfully set checksumBehavior to 'ignore'
🔢 Adding package resolutions:

🎛 Configuring Yarn 2
> yarn config set enableGlobalCache false
➤ YN0000: Successfully set enableGlobalCache to false
> yarn config set enableMirror false
➤ YN0000: Successfully set enableMirror to false
> yarn config set npmScopes --json '{ "storybook": { "npmRegistryServer": "http://localhost:6001/" } }'
➤ YN0000: Successfully set npmScopes to {
  storybook: {
    npmAlwaysAuth: false,
    npmAuthIdent: null,
    npmAuthToken: null,
    npmAuditRegistry: null,
    npmPublishRegistry: null,
    npmRegistryServer: 'http://localhost:6001/'
  }
}
> yarn config set unsafeHttpWhitelist --json '["localhost"]'
➤ YN0000: Successfully set unsafeHttpWhitelist to [
  'localhost'
]
> yarn config set pnpFallbackMode none
➤ YN0000: Successfully set pnpFallbackMode to 'none'
> yarn config set enableImmutableInstalls false
➤ YN0000: Successfully set enableImmutableInstalls to false
> yarn config set logFilters --json '[ { "code": "YN0013", "level": "discard" } ]'
➤ YN0000: Successfully set logFilters to [
  {
    code: 'YN0013',
    text: undefined,
    pattern: undefined,
    level: 'discard'
  }
]

⬇️ Installing local dependencies
> yarn install
➤ YN0000: ┌ Resolution step
➤ YN0002: │ @storybook/api@npm:7.0.0-beta.46 doesn't provide react (p720a9), requested by @storybook/manager-api
➤ YN0002: │ @storybook/api@npm:7.0.0-beta.46 doesn't provide react-dom (pe4c3c), requested by @storybook/manager-api
➤ YN0002: │ @storybook/preset-create-react-app@npm:4.1.2 [1b0ac] doesn't provide react-refresh (pa8127), requested by @pmmmwh/react-refresh-webpack-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:4.1.2 [1b0ac] doesn't provide typescript (p533d2), requested by @storybook/react-docgen-typescript-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:4.1.2 [1b0ac] doesn't provide webpack (p9e75f), requested by @pmmmwh/react-refresh-webpack-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:4.1.2 [1b0ac] doesn't provide webpack (p41b50), requested by @storybook/react-docgen-typescript-plugin
➤ YN0002: │ @storybook/react-webpack5@npm:7.0.0-beta.46 [1b0ac] doesn't provide webpack (pf18bd), requested by @storybook/preset-react-webpack
➤ YN0002: │ before-storybook@workspace:. doesn't provide @babel/core (pa7532), requested by @storybook/preset-create-react-app
➤ YN0002: │ before-storybook@workspace:. doesn't provide @testing-library/dom (p1ac37), requested by @testing-library/user-event
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [dfa48] doesn't provide @babel/plugin-syntax-flow (p2f44f), requested by eslint-plugin-flowtype
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [dfa48] doesn't provide @babel/plugin-transform-react-jsx (pd12b2), requested by eslint-plugin-flowtype
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 250ms
➤ YN0000: ┌ Fetch step
➤ YN0019: │ yaml-npm-1.10.2-0e780aebdf-ce4ada136e.zip appears to be unused - removing
➤ YN0019: │ yargs-npm-16.2.0-547873d425-b14afbb51e.zip appears to be unused - removing
➤ YN0019: │ yargs-parser-npm-20.2.9-a1d19e598d-8bb69015f2.zip appears to be unused - removing
➤ YN0019: │ yauzl-npm-2.10.0-72e70ea021-7f21fe0bba.zip appears to be unused - removing
➤ YN0019: │ yocto-queue-npm-0.1.0-c6c9a7db29-f77b3d8d00.zip appears to be unused - removing
➤ YN0000: └ Completed in 10s 88ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0008: │ esbuild@npm:0.16.17 must be rebuilt because its dependency tree changed
➤ YN0008: │ core-js-pure@npm:3.27.2 must be rebuilt because its dependency tree changed
➤ YN0008: │ core-js@npm:3.27.2 must be rebuilt because its dependency tree changed
➤ YN0000: └ Completed in 0s 641ms
➤ YN0000: Done with warnings in 11s 154ms

⚙️ Initializing Storybook
> node /Users/me/Projects/Storybook/core/code/lib/cli/bin/index.js init --yes --debug

 storybook init - the simplest way to add a Storybook to your project. 

 • Detecting project type. ✓

    There seems to be a Storybook already available in this project.
    Apply following command to force:
    
   sb init [options] -f 

🔢 Adding package scripts:
Error running task sandbox:
path is not defined

last part of the log above:

⚙️ Initializing Storybook
> node /Users/me/Projects/Storybook/core/code/lib/cli/bin/index.js init --yes --debug

 storybook init - the simplest way to add a Storybook to your project. 

 • Detecting project type. ✓

    There seems to be a Storybook already available in this project.
    Apply following command to force:
    
   sb init [options] -f 

🔢 Adding package scripts:
Error running task sandbox:
path is not defined```

I peer into the sandbox folder, and things kinda look good, but then when I try to run it:

(norbert/pnp-experiment-2)⚡ % cd sandbox/internal-pnp ~/Projects/Storybook/core
(norbert/pnp-experiment-2) % yarn storybook
node:internal/modules/cjs/loader:959
throw err;
^

Error: Cannot find module '/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/storybook-npm-7.0.0-beta.46-3d9afedaf1-8.zip/node_modules/storybook/index.js'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
at Function.Module._load (node:internal/modules/cjs/loader:804:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

Which is actually the same error I got on my other PR.

I don't know how I can test yarn with pnp.

[ndelangen]

I did discover that this error:

Error: Cannot find module '@storybook/react/package.json'

...is caused by the newly added templates directory in the renderers.

When the cli runs init, it adds the proper renderer package, but it does not itself depend on it.
But then the CLI tries to resolve where the renderer package is installed..
Yarn with pnp installs it in some zip file in some cache dir.. and won't allow normal node to resolve it. So node won't find it, which is a critical error for the CLI, hence the above error.

I tried a few things to fix this.
I figured out I could load the .pnp.cjs file and ask it where the request was installed.
It actually reports a virtual location back.. Not a true location of a real fs.
Supposedly pnp completely hijacks the node resolution and fs to add support for this.

I've tried loading the .pnp.cjs file and calling the setup() function in there.. this seemed to have no effects.

I noticed the .pnp.cjs makes a comment-reference to a package called @yarnpkg/pnp which does exist on npm, but is completely undocumented, no readme, no repository... nothing. I have no idea how to use it, at all.

I don't know I have a lot of options left.

I'm close to just calling yarn pnp "broken" with no way to fix.
I'm open to suggestions and help; from anyone.
I've spend hours and hours and hours trying to fix this, get it to work, always with some cryptic error, that means nothing to me.

We could make an adjustment to our CLI code to simply skip the copying of the templates from the renderer package when we can't find it.. make it fault-tolerant. But this will cause other issue higher up the chain.. stories being missing, assets not being found... etc.

And even if I via such a method fix the problem (Error: Cannot find module '@storybook/react/package.json')... if we have no way to TEST a sandbox with pnp, it's simply a matter of time before it breaks again.

@storybookjs/core

[IanVS]

I wonder if @arcanis would be willing to lend any insight/assistance in order to get storybook working with yarn pnp.

[ndelangen]

So I've worked around the pnp issue for getting the templates from the renderer via a new method that does not involve loading the .pnp.cjs, and doing some magic string replacing to get the zipfile path.
Instead.. I download the tarball from npm directly, and use that.

As a general fallback for when the renderer package could not be found.

[arcanis]

I wonder if @arcanis would be willing to lend any insight/assistance in order to get storybook working with yarn pnp.

👋 Do you have specific questions? The thread is a bit long and I'm not familiar with SB 😅

Generally, the .pnp.cjs file is a file that is supposed to be injected within the Node runtime. It hooks into Module._resolveFilename & friends so that require can locate files. While you can require('./.pnp.cjs').setup(), in general you don't need to: Yarn automatically adds --require ./path/to/.pnp.cjs to NODE_OPTIONS when calling bins.

If you get "Cannot find module" as error message, it means that the resolution goes through the Node resolver (not the PnP one, which throws more verbose error messages). It's then a question of figuring out why it goes there:

• Is NODE_OPTIONS overwritten somewhere?

• Where are located the files you're evaluating? If they're in a temporary folder outside of your project, PnP will yield the resolution to the native Node resolver, which will look into the node_modules.

[ndelangen]

Is NODE_OPTIONS overwritten somewhere?

👀 ...yes

[ndelangen]

🔢 Adding package scripts:
Error running task sandbox:
path is not defined

I traced this back to this line:

storybook/scripts/tasks/sandbox-parts.ts

Line 431 in 734767b

const mainAddons = mainConfig.getFieldValue(['addons']).reduce((acc: string[], addon: any) => {

Which fails because:

storybook/code/lib/csf-tools/src/ConfigFile.ts

Line 238 in e54cfed

const value = (0, eval)(`(() => (${code}))()`);

fails hard, on the code that's in main.js when in pnp mode.

[ndelangen]

Ok, cool the sandbox generates now! Or at least the process exits successfully now.

When I try to run the sandbox I get this error though:

(norbert/pnp-experiment-2) % yarn storybook                  ~/Projects/Storybook/core/sandbox/internal-pnp
/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.pnp.cjs:32334
    throw firstError;
    ^

Error: @storybook/cli tried to access download-tarball, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: download-tarball
Required by: @storybook/cli@npm:7.0.0-beta.46 (via /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-cli-npm-7.0.0-beta.46-aec8906c78-8.zip/node_modules/@storybook/cli/dist/)

Require stack:
- /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-cli-npm-7.0.0-beta.46-aec8906c78-8.zip/node_modules/@storybook/cli/dist/generate.js
- /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-cli-npm-7.0.0-beta.46-aec8906c78-8.zip/node_modules/@storybook/cli/bin/index.js
- /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/storybook-npm-7.0.0-beta.46-3d9afedaf1-8.zip/node_modules/storybook/index.js
    at Function.require$$0.Module._resolveFilename (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.pnp.cjs:32333:13)
    at Function.require$$0.Module._load (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.pnp.cjs:32183:42)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-cli-npm-7.0.0-beta.46-aec8906c78-8.zip/node_modules/@storybook/cli/dist/generate.js:1:6753)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Object.require$$0.Module._extensions..js (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.pnp.cjs:32377:33)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.require$$0.Module._load (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.pnp.cjs:32214:14)

Which hints at perhaps the version from the public npm registry is being used, not the one from verdaccio?

[ndelangen]

I ssh'ed into the CI runner ran the command again, and it succeeded this time...

circleci@666b35443291:/tmp/storybook/sandbox/angular-cli-default-ts$ yarn build-storybook
info => Cleaning outputDir: /storybook-static
info => Loading presets
info => Building manager..
info => Manager built (238 ms)
info => Compiling preview..
info => Copying static files: /tmp/storybook/sandbox/angular-cli-default-ts/node_modules/@storybook/manager/static at /tmp/storybook/sandbox/angular-cli-default-ts/storybook-static/sb-common-assets
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using angular browser target options from "angular-latest:build"
info => Using angular project with "tsConfig:/tmp/storybook/sandbox/angular-cli-default-ts/.storybook/tsconfig.json"
info => Using default Webpack5 setup
6% setup before compile angular-compilerinfo 💡 Skipping template-stories/addons/docs/stories-mdx/csf-in-mdx.stories.js: NoMetaError: CSF: missing default export /tmp/storybook/sandbox/angular-cli-default-ts/template-stories/addons/docs/stories-mdx/csf-in-mdx.stories.js (line 1, col 0)
info 
info More info: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
info => Preview built (1.33 min)
WARN Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
WARN Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
WARN /tmp/storybook/sandbox/angular-cli-default-ts/src/app/app-routing.module.ts is part of the TypeScript compilation but it's unused.
WARN Add only entry points to the 'files' or 'include' properties in your tsconfig.
WARN /tmp/storybook/sandbox/angular-cli-default-ts/src/app/app.component.ts is part of the TypeScript compilation but it's unused.
WARN Add only entry points to the 'files' or 'include' properties in your tsconfig.
WARN /tmp/storybook/sandbox/angular-cli-default-ts/src/app/app.module.ts is part of the TypeScript compilation but it's unused.
WARN Add only entry points to the 'files' or 'include' properties in your tsconfig.
WARN /tmp/storybook/sandbox/angular-cli-default-ts/src/main.ts is part of the TypeScript compilation but it's unused.
WARN Add only entry points to the 'files' or 'include' properties in your tsconfig.
WARN /tmp/storybook/sandbox/angular-cli-default-ts/src/stories/frameworks/angular/core/moduleMetadata/angular-src/dummy.service.ts is part of the TypeScript compilation but it's unused.
WARN Add only entry points to the 'files' or 'include' properties in your tsconfig.
WARN /tmp/storybook/sandbox/angular-cli-default-ts/src/stories/frameworks/angular/core/moduleMetadata/angular-src/service.component.ts is part of the TypeScript compilation but it's unused.
WARN Add only entry points to the 'files' or 'include' properties in your tsconfig.
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets: 
WARN   6714.1bb7384a.iframe.bundle.js (396 KiB)
WARN   4819.de9d6667.iframe.bundle.js (583 KiB)
WARN   4801.7fccf5ba.iframe.bundle.js (2.93 MiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (3.16 MiB)
WARN       runtime~main.97582613.iframe.bundle.js
WARN       4801.7fccf5ba.iframe.bundle.js
WARN       main.01eb4ecea8870f3a4901.css
WARN       main.7388adba.iframe.bundle.js
WARN 
info => Output directory: /tmp/storybook/sandbox/angular-cli-default-ts/storybook-static
circleci@666b35443291:/tmp/storybook/sandbox/angular-cli-default-ts$ 

I'm stuck on this... argh

[arcanis]

Error: @storybook/cli tried to access download-tarball, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

It means something did the equivalent of require('download-tarball') - since you have no deps called download-tarball, the require call failed. Sounds weird your code would do such a require, though 🤔

[IanVS]

@arcanis it looks like he did indeed add a dependency on download-tarball: https://github.com/storybookjs/storybook/pull/21046/files#diff-3cf2bf634612fafa190c1401d9c7b6161f73f34c2fa0ceb9fa5cdd60dc64f64bR72, so it's strange that CI threw that error. It shouldn't be trying to use the package unless the verdaccio version is used (local npm registry to serve up the monorepo packages), but if it is being used, then it should be in the package.json.

It also seems strange that we'd need to deal with tarballs at all, I would have expected yarn to handle such details.

[ndelangen]

@arcanis There is something weird going on in yarn pnp in this sandbox... This message it's giving me:

(norbert/pnp-experiment-2)⚡ [130] % yarn storybook                                                                                                                               ~/Projects/Storybook/core/sandbox/internal-pnp
/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.pnp.cjs:32334
    throw firstError;
    ^

Error: @storybook/cli tried to access download-tarball, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: download-tarball
Required by: @storybook/cli@npm:7.0.0-beta.47 (via /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-cli-npm-7.0.0-beta.47-6b3f4795dd-8.zip/node_modules/@storybook/cli/dist/)

Require stack:
- /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-cli-npm-7.0.0-beta.47-6b3f4795dd-8.zip/node_modules/@storybook/cli/dist/generate.js
- /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-cli-npm-7.0.0-beta.47-6b3f4795dd-8.zip/node_modules/@storybook/cli/bin/index.js
- /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/storybook-npm-7.0.0-beta.47-d0b0778712-8.zip/node_modules/storybook/index.js
    at Function.require$$0.Module._resolveFilename (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.pnp.cjs:32333:13)
    at Function.require$$0.Module._load (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.pnp.cjs:32183:42)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-cli-npm-7.0.0-beta.47-6b3f4795dd-8.zip/node_modules/@storybook/cli/dist/generate.js:1:6806)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Object.require$$0.Module._extensions..js (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.pnp.cjs:32377:33)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.require$$0.Module._load (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.pnp.cjs:32214:14)
(norbert/pnp-experiment-2)⚡ [1] %                                                                                                                                                ~/Projects/Storybook/core/sandbox/internal-pnp

... is wrong!

If I open /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-cli-npm-7.0.0-beta.47-6b3f4795dd-8.zip and I have a look into the package.json there.. It DOES have a dependency on:

"download-tarball": "^2.0.0",

see:

So yarn's warning that this uses this package, but doesn't depend on it, is not correct.

I suspect some sort of caching?

I have verified that yarn has taken the the package from the verdaccio server, and is using the correct version.

I figured that perhaps the cache is in the lockfile.
So I emptied the lockfile in the sandbox and ran yarn install..
Then I ran yarn storybook again... and...

got a different error:

(norbert/pnp-experiment-2)⚡ % yarn storybook                                                                                                                                     ~/Projects/Storybook/core/sandbox/internal-pnp
@storybook/cli v7.0.0-beta.47

node:fs:1588
  handleErrorFromBinding(ctx);
  ^

Error: ENOTDIR: not a directory, stat '/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@aw-web-design-x-default-browser-npm-1.4.88-2e181ba362-8.zip/node_modules/@aw-web-design/x-default-browser/src/node_modules/default-browser-id'
    at statSync (node:fs:1588:3)
    at tryStatSync (node:internal/modules/esm/resolve:189:13)
    at packageResolve (node:internal/modules/esm/resolve:918:18)
    at moduleResolve (node:internal/modules/esm/resolve:1000:20)
    at defaultResolve (node:internal/modules/esm/resolve:1214:11)
    at nextResolve (node:internal/modules/esm/loader:165:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)
    at ESMLoader.import (node:internal/modules/esm/loader:528:22)
    at importModuleDynamically (node:internal/modules/cjs/loader:1065:29) {
  errno: -20,
  syscall: 'stat',
  code: 'ENOTDIR',
  path: '/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@aw-web-design-x-default-browser-npm-1.4.88-2e181ba362-8.zip/node_modules/@aw-web-design/x-default-browser/src/node_modules/default-browser-id'
}
(norbert/pnp-experiment-2)⚡ [1] %                                                                                                                                                ~/Projects/Storybook/core/sandbox/internal-pnp

This error means very little to me.. but I can take a look into the package mentioned:

node_modules/@aw-web-design/x-default-browser/src/node_modules/default-browser-id certainly doesn't appear to exist in that package...

But the package@aw-web-design/x-default-browser does depend on that according to this in the .pnp.cjs file:

      ["@aw-web-design/x-default-browser", [\
        ["npm:1.4.88", {\
          "packageLocation": "./.yarn/cache/@aw-web-design-x-default-browser-npm-1.4.88-2e181ba362-c85e61dc9e.zip/node_modules/@aw-web-design/x-default-browser/",\
          "packageDependencies": [\
            ["@aw-web-design/x-default-browser", "npm:1.4.88"],\
            ["default-browser-id", "npm:3.0.0"]\
          ],\
          "linkType": "HARD"\
        }]\
      ]],\

I'm not sure if this is normal, but I notice the /src/ part of this path in the error message:
2e181ba362-8.zip/node_modules/@aw-web-design/x-default-browser/src/node_modules/default-browser-id
... I find that odd, but maybe it's completely normal?

Looking into the source of the packages mentioned in the logs, this is where it makes a reference to the sub-package:

const defaultBrowserId = import('default-browser-id');

Here's the code on github: https://github.com/The-Code-Monkey/TechStack/blob/dev/packages/x-default-browser/src/detect-mac.js#L1

Is the problem that it's using an ESM import statement? 🤔

FYI @The-Code-Monkey just letting you know.

[ndelangen]

Here's a zip of the sandbox, after re-generating the lockfile:
https://cdn.discordapp.com/attachments/733310202702594048/1075110845354356858/internal-pnp.zip

[ndelangen]

I went ahead and did a little trick to make the @aw-web-design/x-default-browser package work..

I re-created the sandbox, re-generated the lockfile, re-ran yarn install, and re-tried running yarn storybook...

Seems like it's getting even closer now, here's the error:

(norbert/pnp-ci) % yarn storybook                                      ~/Projects/Storybook/core/sandbox/internal-pnp
@storybook/cli v7.0.0-beta.47


attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

✔ Would you like to send crash reports to Storybook? … yes
ERR! Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/__virtual__/@storybook-builder-webpack5-virtual-293f37029e/0/cache/@storybook-builder-webpack5-npm-7.0.0-beta.47-578c0007c8-8.zip/node_modules/@storybook/builder-webpack5/dist/index.js' imported from /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-core-server-npm-7.0.0-beta.47-7d5667418f-8.zip/node_modules/@storybook/core-server/dist/index.js
ERR! Did you mean to import /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/__virtual__/@storybook-builder-webpack5-virtual-293f37029e/0/cache/@storybook-builder-webpack5-npm-7.0.0-beta.47-578c0007c8-8.zip/node_modules/@storybook/builder-webpack5/dist/index.js?
ERR!     at __node_internal_captureLargerStackTrace (node:internal/errors:477:5)
ERR!     at new NodeError (node:internal/errors:387:5)
ERR!     at finalizeResolution (node:internal/modules/esm/resolve:429:11)
ERR!     at moduleResolve (node:internal/modules/esm/resolve:1006:10)
ERR!     at defaultResolve (node:internal/modules/esm/resolve:1214:11)
ERR!     at nextResolve (node:internal/modules/esm/loader:165:28)
ERR!     at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
ERR!     at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)
ERR!     at ESMLoader.import (node:internal/modules/esm/loader:528:22)
ERR!     at importModuleDynamically (node:internal/modules/cjs/loader:1065:29)
ERR!     at importModuleDynamicallyWrapper (node:internal/vm/module:438:21)
ERR!     at importModuleDynamically (node:vm:389:46)
ERR!     at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
ERR!     at getPreviewBuilder (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-core-server-npm-7.0.0-beta.47-7d5667418f-8.zip/node_modules/@storybook/core-server/dist/index.js:11:2017)
ERR!     at buildDevStandalone (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-core-server-npm-7.0.0-beta.47-7d5667418f-8.zip/node_modules/@storybook/core-server/dist/index.js:34:2143)
ERR!     at async withTelemetry (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-core-server-npm-7.0.0-beta.47-7d5667418f-8.zip/node_modules/@storybook/core-server/dist/index.js:34:5571)
ERR!     at async dev (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-cli-npm-7.0.0-beta.47-6b3f4795dd-8.zip/node_modules/@storybook/cli/dist/generate.js:462:3116)
ERR!  Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/__virtual__/@storybook-builder-webpack5-virtual-293f37029e/0/cache/@storybook-builder-webpack5-npm-7.0.0-beta.47-578c0007c8-8.zip/node_modules/@storybook/builder-webpack5/dist/index.js' imported from /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-core-server-npm-7.0.0-beta.47-7d5667418f-8.zip/node_modules/@storybook/core-server/dist/index.js
ERR! Did you mean to import /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/__virtual__/@storybook-builder-webpack5-virtual-293f37029e/0/cache/@storybook-builder-webpack5-npm-7.0.0-beta.47-578c0007c8-8.zip/node_modules/@storybook/builder-webpack5/dist/index.js?
ERR!     at __node_internal_captureLargerStackTrace (node:internal/errors:477:5)
ERR!     at new NodeError (node:internal/errors:387:5)
ERR!     at finalizeResolution (node:internal/modules/esm/resolve:429:11)
ERR!     at moduleResolve (node:internal/modules/esm/resolve:1006:10)
ERR!     at defaultResolve (node:internal/modules/esm/resolve:1214:11)
ERR!     at nextResolve (node:internal/modules/esm/loader:165:28)
ERR!     at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
ERR!     at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)
ERR!     at ESMLoader.import (node:internal/modules/esm/loader:528:22)
ERR!     at importModuleDynamically (node:internal/modules/cjs/loader:1065:29)
ERR!     at importModuleDynamicallyWrapper (node:internal/vm/module:438:21)
ERR!     at importModuleDynamically (node:vm:389:46)
ERR!     at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
ERR!     at getPreviewBuilder (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-core-server-npm-7.0.0-beta.47-7d5667418f-8.zip/node_modules/@storybook/core-server/dist/index.js:11:2017)
ERR!     at buildDevStandalone (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-core-server-npm-7.0.0-beta.47-7d5667418f-8.zip/node_modules/@storybook/core-server/dist/index.js:34:2143)
ERR!     at async withTelemetry (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-core-server-npm-7.0.0-beta.47-7d5667418f-8.zip/node_modules/@storybook/core-server/dist/index.js:34:5571)
ERR!     at async dev (/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-cli-npm-7.0.0-beta.47-6b3f4795dd-8.zip/node_modules/@storybook/cli/dist/generate.js:462:3116) {
ERR!   code: 'ERR_MODULE_NOT_FOUND'
ERR! }

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

@arcanis is there some bandwidth on your side to assist the storybook team (me?) on this?

Here's the most important part of the error (I think):

✔ Would you like to send crash reports to Storybook? … yes
ERR! Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/__virtual__/@storybook-builder-webpack5-virtual-293f37029e/0/cache/@storybook-builder-webpack5-npm-7.0.0-beta.47-578c0007c8-8.zip/node_modules/@storybook/builder-webpack5/dist/index.js' imported from /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-core-server-npm-7.0.0-beta.47-7d5667418f-8.zip/node_modules/@storybook/core-server/dist/index.js
ERR! Did you mean to import /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/__virtual__/@storybook-builder-webpack5-virtual-293f37029e/0/cache/@storybook-builder-webpack5-npm-7.0.0-beta.47-578c0007c8-8.zip/node_modules/@storybook/builder-webpack5/dist/index.js?

It seems to me that the URL yarn cannot find and the one yarn suggests.. are exactly the same..

✔ Would you like to send crash reports to Storybook? … yes
ERR! Error [ERR_MODULE_NOT_FOUND]: Cannot find module '

/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/__virtual__/@storybook-builder-webpack5-virtual-293f37029e/0/cache/@storybook-builder-webpack5-npm-7.0.0-beta.47-578c0007c8-8.zip/node_modules/@storybook/builder-webpack5/dist/index.js

' imported from /Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/cache/@storybook-core-server-npm-7.0.0-beta.47-7d5667418f-8.zip/node_modules/@storybook/core-server/dist/index.js
ERR! Did you mean to import 

/Users/me/Projects/Storybook/core/sandbox/internal-pnp/.yarn/__virtual__/@storybook-builder-webpack5-virtual-293f37029e/0/cache/@storybook-builder-webpack5-npm-7.0.0-beta.47-578c0007c8-8.zip/node_modules/@storybook/builder-webpack5/dist/index.js

?

[ndelangen]

Here's me trying to add this pnp sandbox to our CI setup:
#21093

[ndelangen]

@shilman let's merge and release.

We should continue the investigation and possible discussion about getting the sandbox to work here: #21093

[shilman]

Great job @ndelangen 💪

[ndelangen]