我正在使用Gatsby、Typescript和Apollo(用于GraphQL查询)创建一个新的React应用程序。
在开发环境中测试时,该应用程序可以编译和运行而不会抛出任何错误。
但是,当我使用“gatsby build”进行转译构建时,会出现错误。
我不明白为什么会触发这个错误,也不知道它是从哪里触发的。似乎与Webpack检查构建方式有关,但我不知道如何定位问题,也没有找到任何清晰的答案。
这个错误似乎是由httplink模块引起的。无论在哪个.tsx文件中出现,都会触发错误的代码是:
这是一个TypeScript问题、Gatsby问题、Apollo问题或Webpack问题?或者是它们的组合?
非常感谢,希望你能给我一些帮助!我很难理解所有这些组成部分。
我知道不变式冲突是关于错误引用类型的问题。因为它发生在模块内,我不确定是我做错了什么还是导入库中存在问题。也许是我在基于JavaScript的基本库上强制使用TypeScript检查所导致的问题。我还没有得出结论。
我尝试向gatsby-node.js添加以下配置以忽略模块检查(如此建议:https://gatsby.dev/debug-html),但构建没有成功,尽管错误已更改,因为它无法看到模块。
在开发环境中测试时,该应用程序可以编译和运行而不会抛出任何错误。
但是,当我使用“gatsby build”进行转译构建时,会出现错误。
我不明白为什么会触发这个错误,也不知道它是从哪里触发的。似乎与Webpack检查构建方式有关,但我不知道如何定位问题,也没有找到任何清晰的答案。
这个错误似乎是由httplink模块引起的。无论在哪个.tsx文件中出现,都会触发错误的代码是:
import { HttpLink } from 'apollo-link-http'
const link = new HttpLink({
uri: 'http://localhost:3001/graphql'
})
显示的错误如下:
error Building static HTML failed
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html
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 Violation: 1 (see https://github.com/apollographql/invariant-packages)
- invariant.esm.js:12 new InvariantError
[lib]/[apollo-link-http-common]/[ts-invariant]/lib/invariant.esm.js:12:1
- bundle.esm.js:64 checkFetcher
[lib]/[apollo-link-http-common]/lib/bundle.esm.js:64:52
- bundle.esm.js:8 createHttpLink
[lib]/[apollo-link-http]/lib/bundle.esm.js:8:17
- bundle.esm.js:139 new HttpLink
[lib]/[apollo-link-http]/lib/bundle.esm.js:139:1
- Strategy.tsx:6 Module../src/components/Strategy.tsx
lib/src/components/Strategy.tsx:6:14
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- sync-requires.js:10 Object../.cache/sync-requires.js
lib/.cache/sync-requires.js:10:56
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- static-entry.js:9 Module../.cache/static-entry.js
lib/.cache/static-entry.js:9:22
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- bootstrap:83
lib/webpack/bootstrap:83:1
- universalModuleDefinition:3 webpackUniversalModuleDefinition
lib/webpack/universalModuleDefinition:3:1
- universalModuleDefinition:10 Object.<anonymous>
lib/webpack/universalModuleDefinition:10:2"
这是一个TypeScript问题、Gatsby问题、Apollo问题或Webpack问题?或者是它们的组合?
非常感谢,希望你能给我一些帮助!我很难理解所有这些组成部分。
我知道不变式冲突是关于错误引用类型的问题。因为它发生在模块内,我不确定是我做错了什么还是导入库中存在问题。也许是我在基于JavaScript的基本库上强制使用TypeScript检查所导致的问题。我还没有得出结论。
我尝试向gatsby-node.js添加以下配置以忽略模块检查(如此建议:https://gatsby.dev/debug-html),但构建没有成功,尽管错误已更改,因为它无法看到模块。
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /apollo-link-http/,
use: loaders.null(),
},
],
},
})
}
}
简要概述一下,这段代码旨在创建客户端对象以启用对graphql端点的查询。在运行“gatsby build”时出现了变体错误(如上所述)。
import * as React from 'react'
import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
const cache = new InMemoryCache()
const link = new HttpLink({
uri: 'http://localhost:3001/graphql'
})
const client = new ApolloClient({
cache,
link
})
import { createHttpLink } from 'apollo-link-http';
吗? - Amir-Mousavi