如何修改Storybook及其插件的默认路径（受限Windows环境）

在受限Windows环境运行Next.js应用并启动Storybook，环境版本：Node v20.8.1、Storybook 7.6.17、React 18.2、Next.js 13.1.2。

执行npm run storybook时出现权限拒绝错误：Cannot read directory '../../../My Documents': Access is denied.，随后node_modules/.cache/sb-manager下的每个文件都触发重复的panic: runtime error: invalid memory address or nil pointer dereference空指针异常。

问题根源是sb-manager生成的Windows绝对路径（如C:\USERS\USERNAME\DONT COME IN HERE!）无法访问，当前sb-manager内文件路径为c:/Users/XXXXX/Documents/XXXX/node_modules/@storybook/addon-whatever...格式，需修改为Git Bash可访问的~/Documents/XXXX/node_modules/@storybook/addon-whatever...格式，调整addons和/或sb-manager的默认路径。

报错信息

> vc-app@0.1.0 storybook
> storybook dev -p 6006
 
@storybook/cli v7.6.17
 
info => Serving static files from ./.\public at /
info => Starting manager..
X [ERROR] Cannot read directory "../../../My Documents": Access is denied.
 
X [ERROR] panic: runtime error: invalid memory address or nil pointer dereference (while parsing "../../../My Documents/XXX/XXX/node_modules/.cache/sb-manager/essentials-actions-2/manager-bundle.js")
 
  debug.Stack (runtime/debug/stack.go:24)
  helpers.PrettyPrintedStack (internal/helpers/stack.go:9)
  bundler.parseFile.func1 (internal/bundler/bundler.go:189)
  panic (runtime/panic.go:884)
  resolver.resolverQuery.tsConfigForDir (internal/resolver/resolver.go:977)
  resolver.resolverQuery.resolveWithoutSymlinks (internal/resolver/resolver.go:828)
  resolver.(*Resolver).Resolve (internal/resolver/resolver.go:577)
  bundler.RunOnResolvePlugins (internal/bundler/bundler.go:901)
  bundler.parseFile (internal/bundler/bundler.go:397)
  bundler.(*scanner).maybeParseFile (internal/bundler/bundler.go:1385)
 
X [ERROR] panic: runtime error: invalid memory address or nil pointer dereference (while parsing "../../../My Documents/XXX/XXX/node_modules/.cache/sb-manager/essentials-controls-1/manager-bundle.js")
 
  debug.Stack (runtime/debug/stack.go:24)
  helpers.PrettyPrintedStack (internal/helpers/stack.go:9)
  bundler.parseFile.func1 (internal/bundler/bundler.go:189)
  panic (runtime/panic.go:884)
  resolver.resolverQuery.tsConfigForDir (internal/resolver/resolver.go:977)
  resolver.resolverQuery.resolveWithoutSymlinks (internal/resolver/resolver.go:828)
  resolver.(*Resolver).Resolve (internal/resolver/resolver.go:577)
  bundler.RunOnResolvePlugins (internal/bundler/bundler.go:901)
  bundler.parseFile (internal/bundler/bundler.go:397)
  bundler.(*scanner).maybeParseFile (internal/bundler/bundler.go:1385)

Storybook配置文件.storybook/main.js

/** @type { import('@storybook/nextjs').StorybookConfig } */
const config = {
    stories: [
        "../stories/**/*.mdx",
        "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
        "../components/**/*.stories.@(js|ts)",
    ],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/addon-onboarding",
        "@storybook/addon-interactions",
        "@storybook/addon-designs",
    ],
    framework: {
        name: "@storybook/nextjs",
        options: {},
    },
    core: {
        disableTelemetry: true,
    },
    docs: {
        autodocs: "tag",
    },
}
export default config

1. 用环境变量自定义缓存目录 #

Storybook支持通过STORYBOOK_CACHE_DIR环境变量指定缓存路径，直接使用Git Bash兼容格式：

• 临时生效：在Git Bash中执行

  STORYBOOK_CACHE_DIR="~/Documents/XXXX/.storybook-cache" npm run storybook
  

• 永久生效：在项目根目录创建/修改.env文件，添加

  STORYBOOK_CACHE_DIR=~/Documents/XXXX/.storybook-cache
  

2. 在Storybook配置中指定缓存路径 #

修改.storybook/main.js的core配置，添加cache字段定义自定义路径：

/** @type { import('@storybook/nextjs').StorybookConfig } */
const config = {
    // 保留原有配置
    core: {
        disableTelemetry: true,
        cache: {
            directory: "~/Documents/XXXX/.storybook-cache"
            // 若~解析失败，替换为Git Bash绝对路径："/c/Users/XXXXX/Documents/XXXX/.storybook-cache"
        }
    },
}
export default config

3. 自定义Webpack路径解析（可选） #

若部分addon仍存在路径问题，通过webpackFinal配置路径别名，将Windows路径映射为Git Bash格式：

const path = require('path');

/** @type { import('@storybook/nextjs').StorybookConfig } */
const config = {
    // 保留原有配置
    webpackFinal: async (config) => {
        config.resolve.modules.push(path.resolve(__dirname, '../node_modules'));
        config.resolve.alias = {
            ...config.resolve.alias,
            '@storybook': '/c/Users/XXXXX/Documents/XXXX/node_modules/@storybook'
        };
        return config;
    },
}
export default config

4. 清理旧缓存并重启 #

修改配置后，先删除旧缓存目录：

rm -rf node_modules/.cache/sb-manager

再重新启动Storybook，确保新缓存目录生效。

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