CODEWITHSUNDEEP
vue.jsjestjswebpack-4storybookstoryshots
ey dee ey em
ey dee ey em

Reputation: 8603

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

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

enter image description here

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.

Upvotes: 1

Views: 1710

Answers (1)

Desprit
Desprit

Reputation: 716

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

Upvotes: 1

Related Questions