MongoDB Stitch+；Gatsby Buid:WebPackageError:ReferenceError:self未使用定义

我的react应用程序是由盖茨比开发的。生成过程在依赖项“whatwg fetch”上失败

我的应用程序结构基于以下项目。

我在网上找到了一些提示，他们在那里检查窗口，但我无法让它与我的结构一起工作。 例如：

错误日志：

  1 | var support = {
> 2 |   searchParams: 'URLSearchParams' in self,
    | ^
  3 |   iterable: 'Symbol' in self && 'iterator' in Symbol,
  4 |   blob:
  5 |     'FileReader' in self &&



WebpackError: ReferenceError: self is not defined

- fetch.js:2 Module../node_modules/whatwg-fetch/fetch.js
  node_modules/whatwg-fetch/fetch.js:2:1

- BrowserFetchTransport.js:1 Module../node_modules/mongodb-stitch-browser-core/dist/esm/core/internal/net/BrowserFetchTransport.js
  node_modules/mongodb-stitch-browser-core/dist/esm/core/internal/net/BrowserFetchTransport.js:1:1

- index.js:1 Module../node_modules/mongodb-stitch-browser-core/dist/esm/index.js
  node_modules/mongodb-stitch-browser-core/dist/esm/index.js:1:1

- index.js:1 Module../node_modules/mongodb-stitch-browser-sdk/dist/esm/index.js
  node_modules/mongodb-stitch-browser-sdk/dist/esm/index.js:1:1`

---

问题在于

whatwgfetch

包，该包设计为使用浏览器端。盖茨比构建应用程序时，代码在Node.js中执行，因此所述包无法运行

MongoDB为Stitch JS SDK分发了两个包——一个用于浏览器，一个用于服务器。理想情况下，您应该同时使用这两种方法，每种方法都应该在他们想要的环境中使用

---

我试图在gatsby应用程序中使用mongodb Stitch浏览器sdk连接到Stitch，但构建静态html页面失败。 我使用react-loadable解决了这个问题（导入使用react-loadable调用缝合的组件） Post.js文件

...
    const LoadableComponent = Loadable({
      loader: () => import('../components/Comments'),
      loading() {
       return <div>Loading...</div>
      }
    });
...

。。。
常量LoadableComponent=可加载({
加载程序：（）=>导入（'../components/Comments'），
加载（）{
返回加载。。。
}
});
...

Comments.js组件导入Stitch并连接到数据库