NX Monorepo中Storybook+Vite配置报错及解决方案求助

问题本质 #

你碰到的.node文件加载错误，是因为Vite默认不支持处理Node.js原生模块（.node后缀文件），而@ngrok/ngrok依赖恰好包含这类文件。同时你希望限制Vite仅监听stories文件路径，从根源减少无关模块的扫描与加载，避免触发不必要的依赖处理逻辑。

可行解决方案 #

1. 精确限制Vite的监听路径 #

在Storybook的main.ts配置里，先通过stories字段指定仅扫描stories文件，再在viteFinal中设置忽略其他无关目录，让Vite只关注目标文件：

// apps/storybook/vite-react/.storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  // 精确指定stories文件路径
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  viteFinal: async (config) => {
    // 配置监听忽略规则
    config.server = config.server || {};
    config.server.watch = config.server.watch || {};
    config.server.watch.ignored = [
      '**/node_modules/**',
      // 只保留stories所在的src子路径，忽略其他文件
      '**/apps/**/!(src/**/*.stories.*)',
      // 如果monorepo有libs目录，也直接忽略
      '**/libs/**',
    ];

    return config;
  },
};

export default config;

2. 排除@ngrok/ngrok的Vite处理 #

既然该依赖是无关触发错误的源头，直接在Vite配置中排除它的优化与打包流程：

// 继续在viteFinal函数中添加以下配置
config.optimizeDeps = config.optimizeDeps || {};
// 优化阶段排除该依赖
config.optimizeDeps.exclude = [...(config.optimizeDeps.exclude || []), '@ngrok/ngrok'];

config.build = config.build || {};
config.build.rollupOptions = config.build.rollupOptions || {};
// 打包阶段标记为外部依赖，不进行处理
config.build.rollupOptions.external = [...(config.build.rollupOptions.external || []), '@ngrok/ngrok'];

3. 排查并移除不必要的插件 #

如果@ngrok/ngrok是某个Storybook插件引入的，检查你的addons列表，移除不需要的插件，或者针对性禁用该插件中涉及该依赖的逻辑。

4. 兜底：处理.node文件（若必须保留依赖） #

如果确实需要用到包含.node文件的依赖，安装vite-plugin-native插件来适配这类文件：

npm install vite-plugin-native --save-dev

然后在viteFinal中注册插件：

import nativePlugin from 'vite-plugin-native';

// 在viteFinal的plugins数组中添加
config.plugins = [...(config.plugins || []), nativePlugin()];

验证步骤 #

1. 删除node_modules/.vite缓存目录，避免旧配置干扰
2. 重新运行npx storybook dev
3. 检查是否消除.node文件加载错误，同时确认Vite仅监听指定的stories路径

内容的提问来源于stack exchange，提问作者Ethan