Gatsby - WebpackError: Invariant Violation error with apolloClient

Question

我刚刚将一个 Gatsby 项目转换为 Typescript，由于这个错误，现在无法运行开发服务器：

There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html Invariant Violation:


  10 |     function InvariantError(message) {
  11 |         if (message === void 0) { message = genericMessage; }
> 12 |         var _this = _super.call(this, typeof message === "number"
     | ^
  13 |             ? genericMessage + ": " + message + " (see https://github.com/apollographql/invariant-packages)"
  14 |             : message) || this;
  15 |         _this.framesToPop = 1;


  WebpackError: Invariant Violation:
  
  - invariant.esm.js:12 
    node_modules/ts-invariant/lib/invariant.esm.js:12:1
  
  - checkFetcher.js:4 
    node_modules/@apollo/client/link/http/checkFetcher.js:4:77
  
  - createHttpLink.js:15 
    node_modules/@apollo/client/link/http/createHttpLink.js:15:17
  
  - apolloClient.ts:3 
    src/utils/apolloClient.ts:3:36
  

这是我的 apolloClient.ts 和各种实验：

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'

export const link = createHttpLink({
  uri: 'https://48p1r2roz4.sse.codesandbox.io'
})

export const apolloClient = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
  cache: new InMemoryCache()
})

// export const apolloClient = new ApolloClient({
//   link,
//   //uri: process.env.GATSBY_GRAPHQL_ENDPOINT,
//   cache: new InMemoryCache()
// })

谷歌搜索建议两件事：

1. 混合使用 import/require 可能会发生 webpack 不变错误。这可能不是问题 - 如果我将文件替换为：

export const apolloClient = ''

一切顺利。

我尝试了各种链接/网址配置等...不行。

想法？

Answer 1

好吧，似乎有些东西正在吞噬错误描述。查看 checkFetcher 的来源，很明显它没有找到 fetch，即使它已安装（isomorphic-fetch） - 在生产中我可能收到错误“22”，但由于某种原因，提供的不错的消息没有出现在我的控制台中。

import { InvariantError } from 'ts-invariant';
export var checkFetcher = function (fetcher) {
    if (!fetcher && typeof fetch === 'undefined') {
        throw process.env.NODE_ENV === "production" ? new InvariantError(22) : new InvariantError("\n\"fetch\" has not been found globally and no fetcher has been configured. To fix this, install a fetch package (like https://www.npmjs.com/package/cross-fetch), instantiate the fetcher, and pass it into your HttpLink constructor. For example:\n\nimport fetch from 'cross-fetch';\nimport { ApolloClient, HttpLink } from '@apollo/client';\nconst client = new ApolloClient({\n  link: new HttpLink({ uri: '/graphql', fetch })\n});\n    ");
    }
};
//# sourceMappingURL=checkFetcher.js.map

解决方案是显式地将 fetch 传递给 apolloConfig：

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'
import fetch from 'isomorphic-fetch'

export const link = createHttpLink({
  fetch,
  uri: process.env.GATSBY_GRAPHQL_ENDPOINT
})

export const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link
})

而且它与 Webpack 无关。看起来错误被误导了。