fix(dev-server-rollup): dedupe imports from outside root

What I did

for rollup adapter I deduped imports from outside root dir, so they are loaded from same URL as when requested by modules inside root dir

Explainer

check unit test for even more descriptive example

Same file was imported by a module inside rootDir and a module outside rootDir in such a way that from the browser perspective it's 2 different files. I ran into this when playing with MDX in the storybook-builder, where some deps located in root monorepo node_modules were importing React in a different way to the way I was importing in my subpackage (where subpackage was a root dir). As a result, prebundled React was loaded twice from 2 different URLs:

For rootDir=packages/storybook-builder/ browser requests looked like:

for a module inside: http://localhost:3000/node_modules/.prebundled_modules/react.mjs
for a module outside: http://localhost:3000/__wds-outside-root__/2/packages/storybook-builder/node_modules/.prebundled_modules/react.mjs

So basically for outside modules it was resolved relative to their own root path /__wds-outside-root__/2.

It's not only a React problem, but also:

problem for any package like React which must not be duplicated on the same page
performance problem
debugging nightmare (I actually remember now I had this problem before and couldn't understand why my breakpoints don't work some times... I guess it's because they were not working for one of 2 paths haha)

This was such a rollercoaster this bug, I almost gave up at some point, because I needed to learn lots of details about WDS internals and rollup adapter specifically, fun stuff :D

modernweb-dev / web

fix(dev-server-rollup): dedupe imports from outside root #2723

What I did

Explainer

🦋 Changeset detected