导入项目的appsync设置时出错
错误

error  in ./node_modules/@aws-sdk/signature-v4/dist-es/getCanonicalHeaders.js

Module parse failed: Unexpected token (10:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         const canonicalHeaderName = headerName.toLowerCase();
|         if (canonicalHeaderName in ALWAYS_UNSIGNABLE_HEADERS ||
>             unsignableHeaders?.has(canonicalHeaderName) ||
|             PROXY_HEADER_PATTERN.test(canonicalHeaderName) ||
|             SEC_HEADER_PATTERN.test(canonicalHeaderName)) {

 @ ./node_modules/@aws-sdk/signature-v4/dist-es/index.js 2:0-60 2:0-60
 @ ./node_modules/@aws-sdk/middleware-signing/dist-es/configurations.js
 @ ./node_modules/@aws-sdk/middleware-signing/dist-es/index.js
 @ ./node_modules/@aws-sdk/client-s3/dist-es/S3Client.js
 @ ./node_modules/@aws-sdk/client-s3/dist-es/index.js
 @ ./node_modules/aws-appsync/lib/link/complex-object-link-uploader.js
 @ ./node_modules/aws-appsync/lib/link/complex-object-link.js
 @ ./node_modules/aws-appsync/lib/link/index.js
 @ ./node_modules/aws-appsync/lib/client.js
 @ ./node_modules/aws-appsync/lib/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.85:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

在vue.config.js配置文件中，我正在使用加载程序，但它对我无效

chainWebpack: (config) => {
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
      .loader('graphql-tag/loader')
      .end();

项目信息
package.json简历

"aws-appsync": "^4.1.9",
    "graphql-tag": "^2.12.6",
    "graphql": "^14.0.2",
    "vue-apollo": "^3.1.0",
    "webpack-graphql-loader": "^1.0.2",

导出参数

export default {
  "graphqlEndpoint": "https://secretEndpoint/graphql",
  "region": "us-east-1",
  "authenticationType": "API_KEY",
  "apiKey": "secretKey"
}

应用价值

import AWSAppSyncClient from "aws-appsync"
import VueApollo from 'vue-apollo'
import appSyncConfig from './AppSync'

const config = {
  url: appSyncConfig.graphqlEndpoint,
  region: appSyncConfig.region,
  auth: {
    type: appSyncConfig.authenticationType,
    apiKey: appSyncConfig.apiKey,
  }
}
const options = {
  defaultOptions: {
    watchQuery: {
      fetchPolicy: "cache-and-network",
    }
  }
}

const client = new AWSAppSyncClient(config, options)
const appsyncProvider = new VueApollo({
  defaultClient: client
})

在main.js中

new Vue({
  router,
  store,
  provide: appsyncProvider.provide(),
  render: (h) => h(App),
}).$mount("#app");

有人能帮我解决这个问题吗？

我在vue.config.js文件中尝试了不同的加载程序，但没有一个对我有效。
试试这样的方法：
安装npm i json-loader

chainWebpack: (config) => {
  
    config.module
      .rule('jsauto')
      .use('javascript/auto')
      .loader('json-loader')
      .end()

使用此配置时，我得到的错误不同：

error  in (webpack)-dev-server/client?http://192.168.1.85:8080&sockPath=/sockjs-node

Syntax Error: Unexpected token ' in JSON at position 0
    at JSON.parse (<anonymous>)

 @ multi (webpack)-dev-server/client?http://192.168.1.85:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in (webpack)/hot/dev-server.js

Syntax Error: Unexpected token / in JSON at position 0
    at JSON.parse (<anonymous>)