Running Storybook as a package in a Bun Monorepo

[max-arias]

Summary

I'm running a Bun workspaces monorepo with various components and storybook, Storybook is rendering Vue and using Vite as the bundler.

Has anyone had success with this? For whatever reason, Storybook (vite?) seems to try reading outside the package.

bun run build-storybook
$ storybook build
@storybook/cli v8.1.10

info => Cleaning outputDir: storybook-static
info => Loading presets
info => Building manager..
info => Manager built (65 ms)
info => Building preview..
vite v5.3.1 building for production...

./sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
✓ 33 modules transformed.
x Build failed in 205ms
=> Failed to build the preview
[vite:load-fallback] Could not load /Users/redacted/dev/my-project/test-apps/react/jsx-runtime (imported by src/stories/Typography.mdx): ENOENT: no such file or directory, open '/Users/redacted/dev/my-project/test-apps/react/jsx-runtime'
...

I can't figure out why it would look outside of the package for stories?

My setup:

├── package.json
├── packages
│   ├── react
│   │   ├── ...
│   ├── react-native
│   │   ├── ..
│   ├── storybook
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── src
│   │   ├── tailwind.config.cjs
│   │   ├── tsconfig.json
│   │   └── vite.config.ts
│   ├── tailwind-preset
│   │   ├── ...
│   ├── vue
│   │   ├── ...
│   └── vue-legacy
│       ├── ...
├── src
│   ├── ... some components here ...
├── test-apps
│   ├── README.md
│   ├── nuxt
│   │   ├── ...
│   ├── react
│   │   ├── ...
│   ├── react-native-expo
│   │   ├── ...
│   └── vue
│       ├── ...

the tl;dr is that storybook is a package that has dependencies of two other packages so I can render the components (packages/vue, packages/vue-legacy) in Storybook for sharing out/testing.

All of the stories/mdx are in packages/storybook/src

Additional information

My packages/storybook/.storybook/main.ts:

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

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-themes',
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
};

export default config;

vite.config.ts:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
});

Create a reproduction

No response

[michaelw85]

I'm running bun + vite.
Maybe this could help you:

I have this in my main.ts

    framework: {
        name: '@storybook/vue3-vite',
        options: {
            builder: {
                viteConfigPath: '.storybook/vite.config.ts',
            },
        },
    },

Vite config:

import vue from '@vitejs/plugin-vue';
import react from '@vitejs/plugin-react';

const config = {
    plugins: [vue(), react()],
};

export default config;