I’m trying to setup Storybook 8.2 with Vite. Here is my storybook config:

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

import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
import { mergeConfig } from "vite";
import { UserConfig } from "vite";

const config: StorybookConfig = {
  stories: ["../../../../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  framework: {
    name: "@storybook/react-vite",
    options: {
      builder: {
        viteConfigPath: "../../../vite.config.ts"
      }
    }
  },
  refs: {
    next: {
      title: "Next.js",
      url: "http://localhost:7007"
    }
  },
  viteFinal: async (config: UserConfig) =>
    mergeConfig(config, {
      plugins: [nxViteTsPaths()],
      build: {
        rollupOptions: {
          external: [
            "universal-fs",
            "packages/etech-ui-utils/**",
            "@ngrok/ngrok-darwin-arm64",
            "@ngrok/ngrok-darwin-universal"
          ]
        }
      }
    })
};

export default config;

// To customize your Vite configuration you can use the viteFinal field.
// Check https://storybook.js.org/docs/react/builders/vite#configuration
// and https://nx.dev/recipes/storybook/custom-builder-configs

However, when running npx storybook dev I get an error:

✘ [ERROR] No loader is configured for ".node" files: ../../../node_modules/.pnpm/@[email protected]/node_modules/@ngrok/ngrok-darwin-arm64/ngrok.darwin-arm64.node

    ../../../node_modules/.pnpm/@[email protected]/node_modules/@ngrok/ngrok/index.js:141:36:
      141 │             nativeBinding = require('@ngrok/ngrok-darwin-arm64')
          ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".node" files: ../../../node_modules/.pnpm/@[email protected]/node_modules/@ngrok/ngrok-darwin-universal/ngrok.darwin-universal.node

    ../../../node_modules/.pnpm/@[email protected]/node_modules/@ngrok/ngrok/index.js:116:32:
      116 │         nativeBinding = require('@ngrok/ngrok-darwin-universal')
          ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

/Users/ekrich/git/etech-ui/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_/node_modules/storybook/bin/index.cjs:23
  throw error;
  ^

Error: Build failed with 3 errors:
../../../node_modules/.pnpm/@[email protected]/node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js:86:21: ERROR: No loader is configured for ".html" files: ../../../node_modules/.pnpm/@[email protected]/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
../../../node_modules/.pnpm/@[email protected]/node_modules/@ngrok/ngrok/index.js:116:32: ERROR: No loader is configured for ".node" files: ../../../node_modules/.pnpm/@[email protected]/node_modules/@ngrok/ngrok-darwin-universal/ngrok.darwin-universal.node
../../../node_modules/.pnpm/@[email protected]/node_modules/@ngrok/ngrok/index.js:141:36: ERROR: No loader is configured for ".node" files: ../../../node_modules/.pnpm/@[email protected]/node_modules/@ngrok/ngrok-darwin-arm64/ngrok.darwin-arm64.node
    at failureErrorWithLog (/Users/ekrich/git/etech-ui/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1472:15)
    at /Users/ekrich/git/etech-ui/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:945:25
    at /Users/ekrich/git/etech-ui/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v22.5.1

It’s worth noting that I’m in an NX monorepo this storybook is nested in apps/storybook/vite-react. There are other dependencies that are problematic so I’m trying to ignore them with rollup options. However, I still get the error.

I have tried several Github suggestions without luck. Essentialy I want Vite to only watch where stories are found. How can I do that?