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

【问题标题】：storyshot for storybook/vue broken with error Module not found: Error: Can't resolve 'fs'故事书/vue 的故事镜头因错误模块未找到而损坏：错误：无法解析“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 :/

标签： vue.js jestjs webpack-4 storybook storyshots

【解决方案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',
}

【讨论】：