感谢darylthornhill花时间打开一个问题并与我们跟进。为了给你一些背景信息，我们已经意识到这个事实，另一个社区成员已经向我们提出了一个类似的问题(例如#21958),关于Gatsby,我们正在收集信息，看看如何最好地解决这个问题，以便不仅你，还有其他Gatsby用户能够设置和使用Storybook而没有任何问题，并希望“越过这座桥”(原谅这个不好的双关语),并与Gatsby维护者保持联系，并对文档进行必要的更改。
编辑：我只是更新了问题标题以提高清晰度。希望你不要误解 🙏

当然，这很有道理。
你提到的其他问题看起来确实有些不同，因为这似乎是有人在遇到一个Gatsby仓库的问题，该仓库已经有一个自定义的babel设置与你从storybook提供的设置冲突了(如果我理解正确的话？!)。
我描述的问题是一个全新的Gatsby设置，以及一个全新的storybook,在那里使用任何来自Gatsby的东西，就我的情况而言，Link 不起作用。
如果这也同样困扰着你内部的其他人，那也是有道理的。无论如何，任何进展都是有帮助的，我会关注其他问题！
感谢你的回复。

你尝试过在Gatsby docs中提到的关于preview.js/ts和Gatsby Link的步骤吗？
你提到的其他问题看起来确实有些不同，因为这似乎是因为有人在使用一个已经与你从storybook提供的自定义babel设置冲突的Gatsby仓库。(如果我理解正确的话？!)
那个自定义babel设置只是Gatsby文档中的一个最小示例，在我看来并不真正那么自定义。实际上可能只是babel-preset-gatsby导致的问题，似乎你还没有将其包含在你的项目中。
有很多问题，其中一些似乎可以通过某种方式绕过，但似乎没有简单的方法可以让Storybook 7与Gatsby v4或v5一起工作。
@jonniebigodes 我们是否应该就这些问题与Gatsby进行一些统一讨论？似乎即使是Storybook frontpage仓库也受到了这些问题的影响：storybookjs/frontpage@main...upgrade-to-sb-7。我在自己的项目中探索了这些相同的更改，就像@kylegach在那里所做的那样。Gatsby文档已经过时了，我没有任何问题去贡献更新它们，但目前我无处可去，因为我对Storybook不太熟悉，让任何东西正常工作似乎都是一项艰巨的任务。

Gatsby维护者在此 👋
很高兴帮助更新/重写我们的文档或就某些内部事项提供指导，以使事情正常工作：)

你好 :)我从问题#21958处来到这里。我们已经使用Storybook 6和Gatsby 5编写了一些工作故事，但在将Storybook升级到7并遵循所有指南后，我们发现了一个名为"Cannot find module"的问题。经过长时间的尝试修复上述问题后，我还尝试使用Gatsby 5初始化清除Storybook 7,猜怎么着：D还是存在相同的问题"Cannot find module"。这很奇怪，因为Storybook可以启动，但无法查看文件吗？

对于那些可能遇到这个问题的人，我成功地将我的storybook(7.1)和gatsby(5.11)结合使用，通过应用上述列出的几个不同的更改。
从Gatsby推荐的更改中，应用main.js和preview.js所需的配置。
你很可能会碰到另一个错误。
正如@oskari上面所指出的，storybook确实存在类似的问题，通过将config.module.rules[0]更改为config.module.rules[2]来修复。
一旦它开始工作，你的storybook将开始构建，但可能会留下React is not defined,但你可以通过删除if (parseInt(React.version) <= 18) { ... }来绕过它。

有人可以在GitHub上创建一个示例的样板仓库，让Gatsby 5与Storybook 7一起工作吗？
我需要在Storybook中使用Gatsby风格的模块导入，以便开箱即用。

import { style1, style2 } from "./MyComponent.module.css"

此外，我的大多数组件都是通过useStaticQuery获取数据的，所以这只是另一个需要解决的问题。
在我看来，Gatsby团队似乎没有时间为Storybook集成留出时间？而Storybook团队也在忙于他们自己的事情...

你好！我正在尝试在我的Gatsby项目中安装storybook,并遇到了与storybook 8.2和gatsby 5.13相同的问题。我可以确认，在引入使用Gatsby link的组件之前，一切都运行正常。我也在TypeError: Cannot read properties of undefined (reading '0')上卡住了，根据@hazuremon的建议，我修改了main.ts中的webpack配置代码，但没有有效地解决问题。

以下是我卡住的地方：我重新设计了main.ts的webpack配置，以绕过未定义的错误，并通过搜索字符串选择要修改的规则。
.storybook/main.ts

import type { StorybookConfig } from "@storybook/react-webpack5";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-webpack5-compiler-swc",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
    "@storybook/addon-styling-webpack",
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  webpackFinal: async (config: any) => {
    // finding the rule based on targetting the loader to be less random
    const rule = config.module.rules.find((rule: any) => {
      const [useItem] = rule?.use || [];
      if (!useItem) {
        return false;
      } else {
        return useItem?.loader?.includes("webpack"); // i'm assuming we're targetting the webpack loader
      }
    });

    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    rule.exclude = [/node_modules\/(?!(gatsby|gatsby-script)\/)/];

    // Remove core-js to prevent issues with Storybook
    // ❗️ isn't this overwriting the previous declaration?
    rule.exclude = [/core-js/];

    // Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
    if (!rule.use[0]?.options) {
      rule.use[0].options = {
        plugins: [require.resolve("babel-plugin-remove-graphql-queries")],
      };
    } else {
      rule.use[0].options.plugins = [
        ...(rule.use[0].options?.plugins || []),
        require.resolve("babel-plugin-remove-graphql-queries"),
      ];
    }

    config.module.rules = [rule, ...config.module.rules];
    config.resolve.mainFields = ["browser", "module", "main"];
    return config;
  },
};

export default config;

我认为我做的类似于之前建议的配置，未定义的控制台错误消失了，但现在我得到了这个：

ERROR in ./src/components/ui/link.stories.ts 48:87
Module parse failed: Identifier '__namedExportsOrder' has already been declared (48:87)
File was processed with these loaders:
 * ./node_modules/@storybook/csf-plugin/dist/webpack-loader.js
 * ./node_modules/@storybook/builder-webpack5/dist/loaders/export-order-loader.js
 * ./node_modules/@storybook/builder-webpack5/dist/loaders/export-order-loader.js
 * ./node_modules/swc-loader/src/index.js
You may need an additional loader to handle the result of these loaders.
|     }

也许export-order-loader.js出了什么问题？
参考一下我的预览文件：
.storybook/preview.ts

import type { Preview } from "@storybook/react";
import { action } from "@storybook/addon-actions";

import "../src/styles/index.css";

global.___loader = {
  enqueue: () => {},
  hovering: () => {},
};

global.__BASE_PATH__ = "/";

window.___navigate = (pathname) => {
  action("NavigateTo:")(pathname);
};

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

如果有帮助的话，非常感谢🙏