Builder breaks with package managers that don't hoist (e.g. pnpm)

I recently tried to upgrade from version 0.0.8 to 0.0.10 on my repo, which is using pnpm as its package manager.

pnpm does not hoist dependencies (so, for example, storybook’s dependencies are not available in the project’s top level node_modules).

When starting a project with storybook-builder-vite and pnpm, we see this error: Error: Failed to resolve force included dependency: airbnb-js-shims, which is one of the forced optimized dependencies here: https://github.com/eirslett/storybook-builder-vite/blob/main/packages/storybook-builder-vite/optimizeDeps.js

I’m confused because:

• this used to work in 0.0.8 and airbnb-js-shims was in that list there
• require.resolve("airbnb-js-shims") shouldn’t work from this file in pnpm, based on my understanding of node module resolution and pnpm. It is resolving, so something is wrong with my understanding

Manually installing airbnb-js-shims fixes this error, but it is replaced with the next one down the list.

Reproduction here: https://github.com/Pinpickle/storybook-builder-vite-0.0.10-pnpm-bug (you can run it under pnpm and yarn to see it breaking and working)

[IanVS]

FWIW, we are working on improved pnpm support in 7.0, and our goal is to not require any hoisting or workarounds.

[Pinpickle]

I found the offending commit: https://github.com/eirslett/storybook-builder-vite/commit/dde6b5fbe56c3fb24ff53c564e61a334984903cc, AKA #28

Basically, as the root used to be inside storybook-builder-vite, the resolutions in optimizeDeps are relative to the root. Now that the root is in the project itself, these resolutions aren’t necessarily correct.

So we want some optimized deps/import to be relative to storybook-builder-vite and the rest be relative to the project root.

Not sure how to accomplish that, though 😅

---

In the meantime, I’ve added this to my viteFinal to basically undo that commit:

const { dirname } = require("path");

// https://github.com/eirslett/storybook-builder-vite/issues/55
config.root = dirname(require.resolve("storybook-builder-vite"));
config.server.fsServe = undefined;

And it works!