how to use storybook with gatsby 3.3.1?

Question

I just made new gatsby site with gatsby-cli. like this.

$ npx gatsby new gatsby-site

And I wanna use storybook with gatsby 3.3.1 ver. so I use storybook-cli on new gatsby project. like this

$ sbinit

But it doesn't work. I think it have webpack version error. If I had run it, The following error message

$ npm run-script storybook

error message:

info @storybook/react v6.2.9
info
info => Loading presets
info => Loading 1 config file in "Users/studyhard/gatsby-site/.storybook"
info => Loading 7 other files in "Users/studyhard/gatsby-site/.storybook"
info => Adding stories defined in "Users/studyhard/gatsby-site/.storybook/main.js"
info => Using prebuilt manager
info => Using implicit CSS loaders
info => Using default Webpack4 setup
(node:15882) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
(Use `node --trace-deprecation ...` to show where the warning was created)
0% compilingERR! TypeError: Cannot read property 'get' of undefined
ERR!     at exports.provide (Users/studyhard/gatsby-site/node_modules/webpack/lib/util/MapHelpers.js:17:20)
ERR!     at Users/studyhard/gatsby-site/node_modules/webpack/lib/DefinePlugin.js:289:51
ERR!     at SyncHook.eval [as call] (eval at create (Users/studyhard/gatsby-site/node_modules/tapable/lib/HookCodeFactory.js:19:10), :13:1)
ERR!     at SyncHook.lazyCompileHook (Users/studyhard/gatsby-site/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.newCompilation (Users/studyhard/gatsby-site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:631:26)
ERR!     at Users/studyhard/gatsby-site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:667:29
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (Users/studyhard/gatsby-site/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (Users/studyhard/gatsby-site/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.compile (Users/studyhard/gatsby-site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:662:28)
ERR!     at Users/studyhard/gatsby-site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:77:18
ERR!     at _next0 (eval at create (Users/studyhard/gatsby-site/node_modules/tapable/lib/HookCodeFactory.js:33:10), :25:1)
ERR!     at eval (eval at create (Users/studyhard/gatsby-site/node_modules/tapable/lib/HookCodeFactory.js:33:10), :34:1)
ERR!     at watchRunHook (Users/studyhard/gatsby-site/node_modules/@storybook/builder-webpack4/node_modules/webpack-virtual-modules/index.js:173:5)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (Users/studyhard/gatsby-site/node_modules/tapable/lib/HookCodeFactory.js:33:10), :30:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (Users/studyhard/gatsby-site/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Watching._go (Users/studyhard/gatsby-site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:41:32)
ERR!  TypeError: Cannot read property 'get' of undefined
ERR!     at exports.provide (Users/studyhard/gatsby-site/node_modules/webpack/lib/util/MapHelpers.js:17:20)
ERR!     at Users/studyhard/gatsby-site/node_modules/webpack/lib/DefinePlugin.js:289:51
ERR!     at SyncHook.eval [as call] (eval at create (Users/studyhard/gatsby-site/node_modules/tapable/lib/HookCodeFactory.js:19:10), :13:1)
ERR!     at SyncHook.lazyCompileHook (Users/studyhard/gatsby-site/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.newCompilation (Users/studyhard/gatsby-site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:631:26)
ERR!     at Users/studyhard/gatsby-site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:667:29
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (Users/studyhard/gatsby-site/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (Users/studyhard/gatsby-site/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.compile (Users/studyhard/gatsby-site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:662:28)
ERR!     at Users/studyhard/gatsby-site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:77:18
ERR!     at _next0 (eval at create (Users/studyhard/gatsby-site/node_modules/tapable/lib/HookCodeFactory.js:33:10), :25:1)
ERR!     at eval (eval at create (Users/studyhard/gatsby-site/node_modules/tapable/lib/HookCodeFactory.js:33:10), :34:1)
ERR!     at watchRunHook (Users/studyhard/gatsby-site/node_modules/@storybook/builder-webpack4/node_modules/webpack-virtual-modules/index.js:173:5)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (Users/studyhard/gatsby-site/node_modules/tapable/lib/HookCodeFactory.js:33:10), :30:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (Users/studyhard/gatsby-site/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Watching._go (Users/studyhard/gatsby-site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:41:32)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-starter-default@0.1.0 storybook: `start-storybook -p 6006`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-starter-default@0.1.0 storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     Users/.npm/_logs/2021-04-23T07_56_37_879Z-debug.log

and then If i check webpack version, I can check this

$ npm ls webpack

gatsby-starter-default@0.1.0 /Users/studyhard/gatsby-site
├─┬ @storybook/addon-essentials@6.2.9
│ └─┬ @storybook/addon-docs@6.2.9
│   └─┬ @storybook/builder-webpack4@6.2.9
│     └── UNMET PEER DEPENDENCY webpack@4.46.0
├─┬ @storybook/react@6.2.9
│ ├─┬ @storybook/core@6.2.9
│ │ └─┬ @storybook/core-server@6.2.9
│ │   └── UNMET PEER DEPENDENCY webpack@4.46.0
│ ├─┬ @storybook/core-common@6.2.9
│ │ └── webpack@4.46.0
│ └── webpack@4.46.0
└─┬ gatsby@3.3.1
  └── webpack@5.34.0

npm ERR! peer dep missing: webpack@^1 || ^2 || ^3 || ^4, required by dotenv-webpack@1.8.0
npm ERR! peer dep missing: webpack@^2.0.0 || ^3.0.0 || ^4.0.0, required by webpack-filter-warnings-plugin@1.2.1
npm ERR! peer dep missing: webpack@^1 || ^2 || ^3 || ^4, required by dotenv-webpack@1.8.0

What should I do?
help me....

user_11241961 · Answer

Upgrade Storybook to a version >=6.3.0

Instructions to use Storybook >=6.3.0 with Gatsby >=3.0 are given in the documentation See docs

Following these instructions, you can use webpack5 with Storybook without error.

user_12903165 · Answer

try to add dotenv-webpack plugin.it should solve your problem.Then you might start getting "Cannot read property 'createSnapshot' of undefined." As you can clearly see mismatch of your webpack versions in your question itself.add peerDependencies and put "webpack": "^5.35.1"into it. OR remove webpack dependency itself.

user_6817318 · Answer

Try:

npm i -D  webpack@latest webpack-cli@latest dotenv-webpack html-webpack-plugin  && npx sb upgrade

how to use storybook with gatsby 3.3.1?

3 Answers