如何在 gatsby 3.3.1 中使用故事书？

Posted 2023-02-19

【中文标题】如何在 gatsby 3.3.1 中使用故事书？

【英文标题】：how to use storybook with gatsby 3.3.1?

【发布时间】：2021-07-17 11:05:25

【问题描述】：

我刚刚使用 gatsby-cli 创建了新的 gatsby 站点。像这样。

$ npx gatsby new gatsby-site

我想在 gatsby 3.3.1 版本中使用故事书。 所以我在新的 gatsby 项目中使用了 storybook-cli。像这样

$ sbinit

但它不起作用。 我认为它有 webpack 版本错误。 如果我运行了它，会出现以下错误消息

$ npm run-script storybook

错误信息：

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), <anonymous>: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), <anonymous>: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), <anonymous>:25:1)
ERR!     at eval (eval at create (Users/studyhard/gatsby-site/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>:25:1)
ERR!     at eval (eval at create (Users/studyhard/gatsby-site/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>: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), <anonymous>: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

然后如果我检查 webpack 版本，我可以检查这个

$ 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

我该怎么办？ 帮帮我....

【参考方案1】：

尝试添加 dotenv-webpack 插件。它应该可以解决您的问题。然后您可能会开始收到“无法读取未定义的属性 'createSnapshot'”。 正如您可以清楚地看到您的问题本身的 webpack 版本不匹配。添加 peerDependencies 并将 "webpack": "^5.35.1" 放入其中。 或者删除 webpack 依赖本身。

【参考方案2】：

试试：

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

【参考方案3】：

将 Storybook 升级到版本 >=6.3.0

文档See docs中给出了使用 Storybook >=6.3.0 和 Gatsby >=3.0 的说明

按照这些说明，您可以将 webpack5 与 Storybook 一起使用而不会出错。