tl; dr

在单个软件包中运行多个vite-Builder Storybook时，遇到Failed to fetch dynamically imported module或ENOTEMPTY: directory not empty错误会引用.vite-storybook？

在.storybook/main.[js/ts/tsx]中，添加：

  async viteFinal(config) {
    config.cacheDir = path.join(__dirname, '../node_modules/.vite-unique-name')
    return config;
  },

不要忘记将import path from 'path';添加到文件的顶部。

这是什么错误？

在同一存储库或软件包中运行多个Vite-Builder Storybook，并且每个故事书都是从相同的node_modules构建的，您可能会看到这样的错误：

Failed to fetch dynamically imported module: http://localhost:6001/node_modules/.cache/.vite-storybook/deps/@storybook_preact_preview.js?v=a6ee60c2

或

Error: ENOTEMPTY: directory not empty, rename '/Users/.../node_modules/.cache/.vite-storybook/deps_temp...' -> '/Users/.../node_modules/.cache/.vite-storybook/deps'

或

ENOENT: no such file or directory, realpath '/Users/.../node_modules/.cache/vite-plugin-externals/@storybook/preview-api.js' [plugin vite:dep-pre-bundle]

为什么这个错误？

这是很多不同的错误！尽管它们可能是由一个不同的问题引起的，但我已经看到它们都是由多层书籍环境引起的，所有故事书都使用Vite Builder。

因此，假设您的错误是故事书使用的Vite -Bundler引起的错误 - 这是因为Vite的设置不希望在存储库中有一个以上的故事书实例。

vite使用缓存目录存储运行故事书所需的编译代码。当通过同一组node_modules构建多个故事书时，它们之间共享了缓存目录。这会导致上述错误，并且只允许一个故事书的实例一次运行。

如何修复此错误

默认的高速缓存目录是<package-root>/node_modules/.cache/.vite-storybook。您可以通过在Storybook的.storybook/main.[js/ts/tsx]文件中设置Vite的cacheDir选项来更改此问题：

  import path from 'path';
  ... // rest of main Storybook config
  async viteFinal(config) {
    // Ensures that the cache directory is unique
    config.cacheDir = path.join(__dirname, '../node_modules/.vite-unique-name')
    return config;
  },

有关如何为故事书配置Vite的更多深入了解。

修复的影响

此修复程序为每个Storybook实例提供了一个唯一的缓存目录。

之前：

node_modules
├── .cache
│   └── sb-manager
│   └── storybook
│   └── vite-plugin-externals
│   └── .vite-storybook
│       ├── deps

之后：

node_modules
├── .cache
│   └── sb-manager
│   └── storybook
│   └── vite-plugin-externals
├── .vite-unique-name
│   ├── deps

结论

我希望这可以帮助您修复故事书！上面列出的错误肯定可能是由其他事物引起的，但是这个想法值得一副复制 - 重载尝试ð。