Core: fix PnP compatibility for @storybook/ui and @storybook/router packages

[Andarist]

Issue: #18319

It's pretty much the same as https://github.com/storybookjs/storybook/pull/18015/files

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit b77e07b. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel=2 --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[Andarist]

The reported issue was only related to this package

[Andarist]

but I've audited the whole lib direcotry and found this offender too

[yannbf]

That's amazing @Andarist ! I'm updating the branch to reenable the E2E tests that were failing because of this issue, I hope you don't mind!

[yannbf]

@Andarist after reenabling the e2e tests, seems like it still fails, however not with the same issue (which is great!)

https://app.circleci.com/pipelines/github/storybookjs/storybook/26404/workflows/a6f23f92-f687-4ae2-8f19-71a8c39964fc/jobs/385085

Any ideas?

[shilman]

@Andarist it looks like the PnP tests are failing for CRA. Is this something you can look into? If you'd like to pair I'd be happy to look at it together. I'm not sure whether it's related to PnP or just a problem with CRA in the current state of things.

[Andarist]

@yannbf @shilman I think that you are referring to the same problem - correct me if I'm wrong.

So I can easily reproduce this by just calling require('@storybook/react') in node. This is because its main field points to a file within /client/ directory:

storybook/app/react/package.json

Line 22 in 6b8210b

"main": "dist/cjs/client/index.js",

this in turn leads to executing this call at the initialization time:

storybook/app/react/src/client/preview/index.tsx

Line 20 in 6b8210b

const api = start(renderToDOM, { render });

and that leads to creating a PostmsgTransport and calling this in its constructor:

storybook/lib/channel-postmessage/src/index.ts

Line 38 in 6b8210b

globalWindow.addEventListener('message', this.handleEvent.bind(this), false);

The problem is that globalWindow is not really a window in node, it's a process object, so it doesn't have an addEventListener method. Note that globalWindow actually is being (sort of) retrieved through an external package but that doesn't change a lot because its main file is super simple:
https://github.com/Raynos/global/blob/91c4362aa2720f7c7a3a085707de7e04f5e77cf3/window.js

Question would be - should node ever execute what is inside that /client/ directory? If not then why did it? Can you provide me with a full script that repro this in a more full project? I've tried to follow your CI setup but it isn't super straightforward and I didn't have enough time right now to analyze it further.

Either way - this doesn't look related to this particular PR and to PnP.

[yannbf]

Great point @Andarist! I think I know what's going on and I'll attempt a small change in this PR to check whether the problem will be fixed.

[codecov]

Codecov Report

Merging #18412 (b77e07b) into next (c8a3b7b) will not change coverage.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##             next   #18412   +/-   ##
=======================================
  Coverage   32.04%   32.04%           
=======================================
  Files         975      975           
  Lines       19216    19216           
  Branches     4031     4031           
=======================================
  Hits         6158     6158           
  Misses      12495    12495           
  Partials      563      563           

Impacted Files	Coverage Δ
lib/core-common/src/presets.ts	61.66% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c8a3b7b...b77e07b. Read the comment docs.

[Andarist]

@yannbf it looks like the e2e and regressions tests are ✅

[yannbf]

Thanks a lot for your work @Andarist <3