Node.js 如何与盖茨比3.3.1一起使用故事书？

我刚刚用盖茨比cli创建了一个新的盖茨比网站。像这样

$ npx gatsby new gatsby-site

我想用盖茨比3.3.1版的故事书。 所以我在新的盖茨比项目中使用了StorybookCLI。像这样

$ sbinit

但它不起作用。 我认为它有网页版本错误。 如果我已经运行了它，下面的错误消息

$ npm run-script storybook

错误消息：

info@storybook/react v6.2.9 信息 信息=>加载预设 info=>在Users/studyhard/gatsby site/.storybook中加载1个配置文件 info=>在Users/studyhard/gatsby site/.storybook中加载7个其他文件 info=>添加在Users/studyhard/gatsby site/.storybook/main.js中定义的故事 信息=>使用预构建的管理器 info=>使用隐式CSS加载程序 信息=>使用默认的Webpack4设置 节点：15882不推荐使用警告：默认POSTSS插件不推荐使用。切换到“@storybook/addon postss”时， 您需要添加自己的插件，例如“PostSS flexbugs修复程序”和“autoprefixer”。 看见https://github.com/storybookjs/storybook/blob/next/MIGRATION.mddeprecated-default-postcss-plugins 详情请参阅。 使用“node-trace deprecation…”显示警告的创建位置 0%编译错误！TypeError:无法读取未定义的属性“get” 犯错误在exports.provide Users/studyhard/gatsby site/node_modules/webpack/lib/util/MapHelpers.js:17:20 犯错误在Users/studyhard/gatsby site/node_modules/webpack/lib/DefinePlugin.js:289:51 犯错误在create Users/studyhard/gatsby site/node_modules/tapable/lib/HookCodeFactory.js:19:10，：13:1的SyncHook.eval[as call]eval中 犯错误在SyncHook.lazycilehook Users/studyhard/gatsby site/node_modules/tapable/lib/Hook.js:154:20 犯错误在Compiler.newCompilation Users/studyhard/gatsby site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:631:26 犯错误在Users/studyhard/gatsby site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:667:29 犯错误在创建用户/studyhard/gatsby站点/node_modules/tapable/lib/HookCodeFactory.js:33:10，：6:1的AsyncSeriesHook.eval[as callAsync]eval中 犯错误在AsyncSeriesHook.lazycilehook Users/studyhard/gatsby site/node_modules/tapable/lib/Hook.js:154:20 犯错误在Compiler.compile Users/studyhard/gatsby site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:662:28 犯错误在Users/studyhard/gatsby site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:77:18 犯错误下一步在create Users/studyhard/gatsby site/node\u modules/tapable/lib/HookCodeFactory.js:33:10，：25:1进行评估 犯错误在create Users/studyhard/gatsby site/node_modules/tapable/lib/HookCodeFactory.js:33:10，：34:1处进行评估 犯错误在watchRunHook Users/studyhard/gatsby site/node_modules/@storybook/builder-webpack4/node_modules/webpack virtual modules/index.js:173:5 犯错误在创建用户/studyhard/gatsby站点/node_modules/tapable/lib/HookCodeFactory.js:33:10，:30:1的AsyncSeriesHook.eval[as callAsync]eval中 犯错误在AsyncSeriesHook.lazycilehook Users/studyhard/gatsby site/node_modules/tapable/lib/Hook.js:154:20 犯错误观看时。_gousers/studyhard/gatsby site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:41:32 犯错误TypeError:无法读取未定义的属性“get” 犯错误在exports.provide Users/studyhard/gatsby site/node_modules/webpack/lib/util/MapHelpers.js:17:20 犯错误在Users/studyhard/gatsby site/node_modules/webpack/lib/DefinePlugin.js:289:51 犯错误在create Users/studyhard/gatsby site/node_modules/tapable/lib/HookCodeFactory.js:19:10，：13:1的SyncHook.eval[as call]eval中 犯错误在SyncHook.lazycilehook Users/studyhard/gatsby site/node_modules/tapable/lib/Hook.js:154:20 犯错误在Compiler.newCompilation Users/studyhard/gatsby site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:631:26 犯错误在Users/studyhard/gatsby site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:667:29 犯错误在创建用户/studyhard/gatsby站点/node_modules/tapable/lib/HookCodeFactory.js:33:10，：6:1的AsyncSeriesHook.eval[as callAsync]eval中 犯错误在AsyncSeriesHook.lazycilehook Users/studyhard/gatsby site/node_modules/tapable/lib/Hook.js:154:20 犯错误在Compiler.compile Users/studyhard/gatsby site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:662:28 犯错误在Users/studyhard/gatsby site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:77:18 犯错误下一步在create Users/studyhard/gatsby site/node\u modules/tapable/lib/HookCodeFactory.js:33:10，：25:1进行评估 犯错误在create Users/studyhard/gatsby site/node_modules/tapable/lib/HookCodeFactory.js:33:10，：34:1处进行评估 犯错误在watchRunHook Users/studyhard/gatsby site/node_modules/@storybook/builder-webpack4/node_modules/webpack virtual modules/index.js:173:5 犯错误在AsyncSeriesHook.eval[as callAsync]中，在create Users/studyhard/gatsby site/node_modules/tapable/lib中评估 /HookCodeFactory.js:33:10，:30:1 犯错误在AsyncSeriesHook.lazycilehook Users/studyhard/gatsby site/node_modules/tapable/lib/Hook.js:154:20 犯错误观看时。_gousers/studyhard/gatsby site/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:41:32 警告损坏的构建，修复上面的错误。 警告：您可能需要刷新浏览器。 npm错误！代码失效循环 npm错误！错误1 npm错误！盖茨比起动器-default@0.1.0故事书：`开始故事书-第6006页` npm错误！退出状态1 npm错误！ npm错误！盖茨比起跑失败了-default@0.1.0故事书剧本。 npm错误！这可能不是npm的问题。上面可能还有其他日志输出。 npm错误！此运行的完整日志可在以下位置找到： npm错误！Users/.npm/_logs/2021-04-23T07_56_37_879Z-debug.log 然后，如果我检查网页版本，我可以检查这个

$ npm ls webpack

盖茨比起动器-default@0.1.0/Users/studyhard/gatsby站点 ├─┬ @故事书/插件-essentials@6.2.9 │ └─┬ @故事书/插件-docs@6.2.9 │ └─┬ @故事书/生成器-webpack4@6.2.9 │ └── 未满足的对等依赖webpack@4.46.0 ├─┬ @故事书/react@6.2.9 │ ├─┬ @故事书/core@6.2.9 │ │ └─┬ @故事书/核心-server@6.2.9 │ │ └── 未满足的对等依赖webpack@4.46.0 │ ├─┬ @故事书/核心-common@6.2.9 │ │ └── webpack@4.46.0 │ └── webpack@4.46.0 └─┬ gatsby@3.3.1 └── webpack@5.34.0 npm错误！缺少对等部门：dotenv要求的网页@^1 | ^2 | ^3 | ^4-webpack@1.8.0 npm错误！缺少对等dep:webpack@^2.0.0 | | | ^3.0.0 | | ^4.0.0，这是webpack筛选器警告所必需的-plugin@1.2.1 npm错误！缺少对等部门：dotenv要求的网页@^1 | ^2 | ^3 | ^4-webpack@1.8.0 我该怎么办？

---

“帮助我…”

尝试添加dotenv webpack插件。它应该可以解决您的问题。然后您可能会开始获取未定义的无法读取属性“createSnapshot”。 您可以在问题本身中清楚地看到您的网页版本不匹配。请添加对等项并将网页：^5.35.1放入其中。 或删除网页包依赖项本身。

尝试：

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