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()
// })

Google搜索建议两件事：

混合/导入/请求可能会发生webpack不变错误。可能不是问题-如果我将文件替换为：

export const apolloClient = ''

一切正常。

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

想法？

Answer 1

看起来似乎有些东西吞没了错误描述。查看checkFetcher的来源，很明显，即使安装了它，也找不到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

解决方案是将获取操作显式传递给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无关。该错误看起来像是误导性传播。

Gatsby-WebpackError：apolloClient发生永久违规错误

1 个答案: