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

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

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!

This single line in .npmrc fixed my problems with storybook and pnpm:

public-hoist-pattern[]=*storybook*

I do not want to “shamefully” hoist modules as it was suggested before since I would like to avoid phantom dependencies. Because of this, I also went for manual package installations, just like @TomABrook did. Another way to provide these missing dependencies without polluting the actual package.json could be to use pnpm’s readPackage hook to inject them:

// .pnpmfile.cjs
function readPackage(pkg, context) {
  const storybookViteDeps = {
    "@storybook/preview-web": "^6.5.10",
    "@storybook/channel-postmessage": "^6.5.10",
    "@storybook/channel-websocket": "^6.5.10",
    "@storybook/client-api": "^6.5.10",
    "@storybook/client-logger": "^6.5.10",
    // This list may change depending on your Storybook (e.g. installed addons)
  };

  if (pkg.name === '@monorepo/design') {
    pkg.dependencies = {
      ...pkg.dependencies,
      ...storybookViteDeps,
    };
  }

  return pkg;
}

module.exports = {
  hooks: {
    readPackage,
  },
};

My company is migrating our monorepo to pnpm workspaces and this has been one of the last blockers for us. The vite final workaround posted above doesn’t seem to work when the storybook is part of a workspaces, however I have managed to get it working by adding the following dev dependencies:

    "@mdx-js/react": "1.6.22",
    "@storybook/addon-backgrounds": "6.5.9",
    "@storybook/addon-measure": "6.5.9",
    "@storybook/addon-outline": "6.5.9",
    "@storybook/channel-postmessage": "^6.5.9",
    "@storybook/channel-websocket": "^6.5.9",
    "@storybook/core-common": "6.5.9",
    "@storybook/client-api": "6.5.9",
    "@storybook/client-logger": "6.5.9",
    "@storybook/preview-web": "^6.5.9",

I’ve been doing some experiments to avoid some of the pre-bundling that we’ve been doing up to now. I’m hopeful that it’ll improve the situation for pnpm users. I’ll report back here if/once I have something more definite, but wanted to let y’all know I’m working on it.

@eirslett that works, yep

This makes sense, given that it’s consistent with yarn/npm’s hoisting behaviour. It’s not really a viable workaround, as removing hoisting is one of the benefits of pnpm.

Two years later I’ve finally tried this again and it works out-of-the-box with my Vite and pnpm setup. Storybook team: thanks for the hard work improving compatibility!

Yes, the 7.0 beta works correctly with pnpm and yarn pnp. I’d recommend trying it out. You can upgrade with npx sb@next upgrade --prerelease.

Hi! It’s still not working for me after running npx sb@next upgrade --prerelease. I’m getting the following error:

[vite] Internal server error: Failed to resolve import "@storybook/preview-api" from "../../../../../../../../virtual:/@storybook/builder-vite/vite-app.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /virtual:/@storybook/builder-vite/vite-app.js
  1  |  import { composeConfigs, PreviewWeb, ClientApi } from '@storybook/preview-api';
     |                                                         ^
  2  |    import '/virtual:/@storybook/builder-vite/setup-addons.js';
  3  |    import { importFn } from '/virtual:/@storybook/builder-vite/storybook-stories.js';

I’m running pnpm in a monorepo and trying to get storybook running for one of the subpackages. In a pnpm monorepo the actual node_modules assets are located in the root folder. Maybe that has something to do with the issues? Here are the dependencies:

    "@storybook/addon-actions": "^7.0.0-beta.30",
    "@storybook/addon-essentials": "^7.0.0-beta.30",
    "@storybook/addon-links": "^7.0.0-beta.30",
    "@storybook/web-components": "^7.0.0-beta.30",
    "@storybook/web-components-vite": "^7.0.0-beta.30",
    "storybook": "^7.0.0-beta.30",
    "@babel/core": "^7.20.12",
    "babel-loader": "^8.3.0"

Using public-hoist-pattern[]=*storybook* as suggested by others does work.

Just to attach some complexity to this issue, if you are using pnpm with (rushjs)[https://rushjs.io/pages/intro/get_started/] you don’t have the option to use --shamefully-hoist

This seems to have been resolved with Storybook 7 release for us.

@RIP21 It works perfectly fine for me, have a look here https://github.com/kaminskypavel/fullpower-stack/tree/master/packages/ui

@IanVS did a great job !👏

This single line in .npmrc fixed my problems with storybook and npm:

public-hoist-pattern[]=*storybook*

🎉 Thanks a lot @srflp for this solution ! works perfectly without clogging package.json or vite config.optimizeDeps.include with a bunch of storybook packages Don’t forget to run pnpm install to update node_modules structure after your changes

config.root = dirname(require.resolve(“storybook-builder-vite”));

This solution to change root appeared to work for me in the first time but was actually breaking @storybook/addon-postcss. The CSS file that i was importing in preview.tsx with @tailwind directives was picked up but tailwind styles were not applied. HMR on modification of a component classname did not trigger an update of the CSS file too.

That might be a suitable work around, but not a real solution 🤔

https://pnpm.io/npmrc#public-hoist-pattern

This setting is useful when dealing with some flawed pluggable tools that don’t resolve dependencies properly.

I’m not a pnpm expert by any means, but I’ve been working on getting the original reproduction above working, and after a lot of hacking around, I think I’ve done it. I pushed up the changes to a new repo: https://github.com/IanVS/vite-storybook-pnpm-shame

In case it helps anyone trying to get pnpm working with @storybook/vue3, I put together a repo with a starter project using Vue 3 + Vite + TS + pnpm + Storybook and the changes that got it all working for me (forked from @IanVS’s repo above – thank you!): https://github.com/jdk2pq/vite-storybook-pnpm-vue

I’ve fixed addon-docs peer dependencies (the major culprit, but possibly not everything?) in 6.5 if anybody wants to take another look at this.

npx sb upgrade --prerelease

just tested it, and it seems to work. unfortunately, it creates a new issue related to deduping @storybook/client-api. the solution here seems to help though

Thanks for the info @Dschungelabenteuer and FYI @omarelb, this is also working and a little less generic:

public-hoist-pattern[]=@storybook/*

Thank you for this @jdk2pq ! I was able to get this done following your process.

I’m not a pnpm expert by any means, but I’ve been working on getting the original reproduction above working, and after a lot of hacking around, I think I’ve done it. I pushed up the changes to a new repo: https://github.com/IanVS/vite-storybook-pnpm-shame

This was a combination of adding a lot of new optimizeDeps.include that are sub-dependencies (which we can add to our own list in this project so others don’t need to), but a few of them required adding the dependencies directly to the repo, which I don’t understand and don’t like. I’m not sure if this is a vite bug, or weird pnpm thing, or what. But at least it seems possible to get this working without hoisting.

@fdc-viktor-luft I rolled my own, yeah. I only used storybook for development so I just needed an easy way to look at components with specific props.

My code is pretty unique to my setup, but the main magic is using glob imports, i.e. import.meta.glob("./**/*.stories.tsx")

@Pinpickle Your workaround seems not to work within pnpm workspaces. Transforming this repository into pnpm workspace and adding the above workaround allows to reproduce the following issue. (See https://github.com/eirslett/storybook-builder-vite/pull/92)

When running cd packages/example-react && pnpm storybook you get the following error:

info => Loading presets
ERR! Error: [vite-plugin-mdx] "react" must be installed

Do you have any idea for an easy workaround?

@IanVS sorry i never got around to working on a minimal repro, but i did return to trying to upgrade my yarn v3.x monorepo to storybook v7.x and the vite builder, and i wound up getting everything to work. it turned out that the errors i was seeing were mostly just symptoms of missing dependencies. in the end, i just needed to thoroughly configure the packageExtensions in my .yarnrc.yml file and use the getAbsolutePath helper in my .storybook/main.ts file. here’s all of the necessary pieces (i’m using v7.5.0-alpha.5 and react-docgen v6.x):

storybook workspace’s package.json:

    "devDependencies": {
        "@babel/core": "^7.20.5",
        "@storybook/addon-docs": "7.5.0-alpha.5",
        "@storybook/addon-essentials": "7.5.0-alpha.5",
        "@storybook/addon-interactions": "7.5.0-alpha.5",
        "@storybook/addon-links": "7.5.0-alpha.5",
        "@storybook/addon-onboarding": "^1.0.8",
        "@storybook/blocks": "7.5.0-alpha.5",
        "@storybook/manager-api": "7.5.0-alpha.5",
        "@storybook/react": "7.5.0-alpha.5",
        "@storybook/react-vite": "7.5.0-alpha.5",
        "@storybook/testing-library": "^0.2.1",
        "@types/react": "^18.0.25",
        "core-js": "^3.26.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "storybook": "7.5.0-alpha.5",
        "typescript": "^5.1.6",
        "vite": "^4.4.9"
    },

root .yarnrc.yml:

plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
    spec: "@yarnpkg/plugin-workspace-tools"

yarnPath: .yarn/releases/yarn-3.6.3.cjs

packageExtensions:
    'eslint-config-react-app@*':
        dependencies:
            '@babel/plugin-syntax-flow': '^7.18.6'
            '@babel/plugin-transform-react-jsx': '^7.18.6'
    '@storybook/builder-vite@*':
        dependencies:
            '@storybook/addon-docs': '7.5.0-alpha.5'
            'react': '^18.2.0'
            'react-dom': '^18.2.0'
    '@storybook/docs-tools@*':
        dependencies:
            'react': '^18.2.0'
            'react-dom': '^18.2.0'
    '@storybook/core-common@*':
        dependencies:
            '@storybook/react-vite': '7.5.0-alpha.5'
            'react': '^18.2.0'
            'react-dom': '^18.2.0'
            'vite': '^4.4.9'

.storybook/main.ts:

import { dirname, join } from 'path';

import type { StorybookConfig } from '@storybook/react-vite';

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
    return dirname(require.resolve(join(value, 'package.json')));
}

const config: StorybookConfig = {
    addons: [
        getAbsolutePath('@storybook/addon-links'),
        getAbsolutePath('@storybook/addon-essentials'),
        getAbsolutePath('@storybook/addon-onboarding'),
        getAbsolutePath('@storybook/addon-interactions'),
    ],
    docs: {
        autodocs: 'tag',
    },
    framework: {
        name: getAbsolutePath('@storybook/react-vite'),
        options: {},
    },
    stories: [
        '../stories/Introduction.stories.mdx',
        '../stories/**/*.stories.mdx',
        '../stories/**/*.stories.@(js|jsx|ts|tsx)',
    ],
    typescript: {
        reactDocgen: 'react-docgen',
    },
};

export default config;

I’m not a pnpm expert by any means, but I’ve been working on getting the original reproduction above working, and after a lot of hacking around, I think I’ve done it. I pushed up the changes to a new repo: https://github.com/IanVS/vite-storybook-pnpm-shame

This was a combination of adding a lot of new optimizeDeps.include that are sub-dependencies (which we can add to our own list in this project so others don’t need to), but a few of them required adding the dependencies directly to the repo, which I don’t understand and don’t like. I’m not sure if this is a vite bug, or weird pnpm thing, or what. But at least it seems possible to get this working without hoisting.

I think it is in some part due to Storybook and it’s use of peerDependencies. I hear Storybook 7.0 is planning to address this.

@Pinpickle Thanks for your response.

I’ve stopped using storybook

Do you have a working alternative or did you just do a simple “storybook” yourself instead?

@fdc-viktor-luft that doesn’t sound good! Truth be told, I’ve stopped using storybook because even with this working, it was still painfully slow.

I’m not sure why this error would come up now, when it didn’t come up before. I think the real solution here would be to fix this builder, so the root can correctly be set to the project root (and React be installed).

---

On another note, Vite’s support of nested optimizeDeps.include (landed in 2.5.2, https://github.com/vitejs/vite/pull/4634) should make this easier to fix properly.