Trouble passing build.rollupOptions to react-vite

[acobster]

Summary

I am using the react-vite framework and am having trouble when I run storybook dev. It runs okay, and eventually starts up, but first it outputs many thousands of error messages like:

Unhandled promise rejection: Error: ENOSPC: System limit for number of file watchers reached, watch '/home/tamayo/projects/bread-cms/.direnv/flake-inputs/dydg48djlykksz8cxq0xjplyxpa9pvf4-source/pkgs/development/tools/build-managers/gradle/tests/java-application/src/main/java/Main.java'
    at FSWatcher.<computed> (node:internal/fs/watchers:247:19)
    at Object.watch (node:fs:2464:36)
    at createFsWatchInstance (file:///home/tamayo/projects/bread-cms/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:45532:17)
    at setFsWatchListener (file:///home/tamayo/projects/bread-cms/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:45579:15)
    at NodeFsHandler._watchWithNodeFs (file:///home/tamayo/projects/bread-cms/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:45734:14)
    at NodeFsHandler._handleFile (file:///home/tamayo/projects/bread-cms/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:45798:23)
    at NodeFsHandler._addToNodeFs (file:///home/tamayo/projects/bread-cms/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:46040:21) {
  errno: -28,
  syscall: 'watch',
  code: 'ENOSPC',
  path: '/home/tamayo/projects/bread-cms/.direnv/flake-inputs/dydg48djlykksz8cxq0xjplyxpa9pvf4-source/pkgs/development/tools/build-managers/gradle/tests/java-application/src/main/java/Main.java',
  filename: '/home/tamayo/projects/bread-cms/.direnv/flake-inputs/dydg48djlykksz8cxq0xjplyxpa9pvf4-source/pkgs/development/tools/build-managers/gradle/tests/java-application/src/main/java/Main.java'
}

This takes a long time and the browser page just spins in the meantime, making it cumbersome to start.

/home/tamayo/projects/bread-cms is the project repo, and .direnv has thousands of files because I'm managing my dev environment with nix-direnv, which creates and caches self-contained installations of different dev tools.

I figured the problem was that Vite/Rollup needed to be told not to watch those files, so following the Vite build docs I tried to add an exclude to pass on to Rollup. But it seems like it's not getting there.

Additional information

I am on Ubuntu 22.04 running Storybook v8.1.6.

My .storybook/main.js:

/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
  stories: [
    "../marx/stories/*.stories.@(js|jsx)",
  ],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
    "@storybook/addon-themes",
  ],
  framework: {
    name: "@storybook/react-vite",
  },
  core: {
    builder: {
      name: '@storybook/builder-vite',
      options: {
        build: {
          watch: {
            exclude: ['.direnv/**'],
          },
        },
      },
    },
  },
};
export default config;

Instead of the above options block I also tried:

      options: {
        watch: {
          exclude: ['.direnv/**'],
        },
      },

(Storybook's Vite builder docs are not super clear on how to do this.)

I also tried putting a vite.config.js at the project root:

import {defineConfig} from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      watch: {
        exclude: ['.direnv/**'],
      },
    },
  },
});

I tried the above both with and without the core.builder.options block in my Storybook config.

All of this resulted in the same errors about too many file watchers.

Create a reproduction

No response

[ento]

I hit the same issue and was able to resolve it by updating the server option in the viteFinal callback.

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

const config: StorybookConfig = {
  // ...
  async viteFinal(config) {
    config.server = {
      ...config.server,
      watch: {
        ignored: ['**/terraform/**', '**/.direnv/**'],
      },
    };

    return mergeConfig(config, {
      // ...
    });
  },
};
export default config;

Relevant code: server option gets replaced by Storybook's config in its internal createViteServer function:
https://github.com/storybookjs/storybook/blob/v8.4.7/code/builders/builder-vite/src/vite-server.ts#L20-L29

[acobster]

That worked! Thanks!