如何解决Gatsby-WebpackError:apolloClient发生永久违规错误
我刚刚将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 = ''
一切正常。
我尝试了各种链接/网址配置等...不行。
想法?
解决方法
看起来似乎有些东西吞没了错误描述。查看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无关。该错误看起来像是误导性传播。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。