Storyshot for Storybook/Vue broken with error Module not found: Error: Can't resolve 'fs'

Question

More detail is within this ticket.

Pasted here for what it looks at at this point:

Describe the bug

Massive cant resolve 'fs' came up with storyshot config after jest already configed and storybook was running correctly.

To Reproduce

Steps to reproduce the behavior:

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

Expected behavior

storyshot should not cause error prevent storybook run correctly

Screenshots

Code snippets

If applicable, add code samples to help explain your problem.

System:

• OS: MacOS

• Device: Macbook Pro

• Browser: NA

• Framework: Vue

• Addons:

  "@storybook/addon-storyshots": "^4.0.6",
  "@storybook/vue": "^4.0.6",
  

Additional info:

I attempted adding node: { fs: 'empty' }, into Storybook's config, it will just cause other error than 'fs' not found one. So not really solving the issue.

Answer 1

Solved by adding this to my .storybook/main.js:

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

Content of .storybook/fsMock.js:

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

More information:

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