Gatsby - WebpackError: Invariant Violation error with apolloClient

Posted 2023-03-10

【中文标题】Gatsby - WebpackError: Invariant Violation error with apolloClient

【英文标题】：

【发布时间】：2021-01-29 09:23:34

【问题描述】：

我刚刚将一个 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()
// )

谷歌搜索建议两件事：

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

export const apolloClient = ''

一切顺利。

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

想法？

【参考方案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 无关。看起来错误被误导了。

【讨论】：

祝福你的心。正是这个。