故事书/vue 的故事镜头因错误模块未找到而损坏：错误：无法解析“fs”

Posted 2023-02-19

【中文标题】故事书/vue 的故事镜头因错误模块未找到而损坏：错误：无法解析“fs”

【英文标题】：storyshot for storybook/vue broken with error Module not found: Error: Can't resolve 'fs'

【发布时间】：2019-04-18 22:26:15

【问题描述】：

https://github.com/storybooks/storybook/issues/4793 更多细节在该票中。 粘贴在这里，看看它在这一点上的样子：

描述错误 在 jest 已经配置并且故事书正常运行之后，大量无法解决“fs”提出了故事镜头配置。

复制 重现行为的步骤：

1. git clone https://github.com/adamchenwei/boilerplate-webpack-babel-sass-storybook-vuejs
2. git checkout `broken/start-after-storyshot-setup`
2. npm install && npm run storybook
4. See error

预期行为 故事镜头不应导致错误阻止故事书正确运行

截图

代码 sn-ps 如果适用，请添加代码示例以帮助解释您的问题。

系统： - 操作系统：MacOS - 设备：Macbook Pro - 浏览器：不适用 - 框架：Vue - 插件： "@storybook/addon-storyshots": "^4.0.6", "@storybook/vue": "^4.0.6",

附加信息：

我尝试将node: fs: 'empty' , 添加到故事书的配置中，它只会导致“fs”未找到之外的其他错误。所以并没有真正解决问题。

任何指针将不胜感激。

【问题讨论】：

我也面临这个问题。你找到解决这个问题的方法了吗？

是库之间的兼容性问题。还没解决，最后一次尝试是两个月前

嗯，我也发现了这个问题：github.com/storybooks/storybook/issues/2898 :/

【参考方案1】：

通过将此添加到我的.storybook/main.js 解决：

webpackFinal: async (config,  configType ) => 
    config.resolve.alias = 
      ...config.resolve.alias,
      'fs': path.resolve(__dirname, 'fsMock.js')
    ;
    return config
  

.storybook/fsMock.js的内容：

module.exports = 
  readFileSync: () => 'mock',

更多信息：

https://storybook.js.org/docs/react/configure/webpack#extending-storybooks-webpack-config https://github.com/storybookjs/storybook/issues/4082#issuecomment-417329791