javascript - Ralat: Ralat rangkaian: url_1.URL bukan konstruktor di new ApolloError

Saya sedang cuba mengesahkan klien Apollo dengan AWS IAM.

Saya mempunyai skrip typescript berikut untuk mengkonfigurasi klien Apollo saya

/* eslint-disable import/prefer-default-export */
/* eslint-disable import/no-mutable-exports */
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';

import axios from 'axios';
import { aws4Interceptor } from 'aws4-axios';
import { InMemoryCache } from 'apollo-cache-inmemory';

import { buildAxiosFetch } from '@lifeomic/axios-fetch';

interface IConnection {
  uri: string;
  region: string;
  accessKeyId: string;
  secretAccessKey: string;
  sessionToken: string;
}

export const initApolloClient = (connection: IConnection): ApolloClient<any> => {
  let apolloClient: ApolloClient<any> = null;

  const interceptor = aws4Interceptor(
    {
      region: connection.region,
      service: 'execute-api',
    },
    {
      accessKeyId: connection.accessKeyId,
      secretAccessKey: connection.secretAccessKey,
      sessionToken: connection.sessionToken,
    }
  );
  axios.interceptors.request.use(interceptor);

  console.log('Set apollo client');
  apolloClient = new ApolloClient({
    link: createHttpLink({
      uri: connection.uri,
      fetch: buildAxiosFetch(axios),
    }),
    cache: new InMemoryCache(),
  });

  return apolloClient;
};

Kod ini berfungsi dengan baik dalam projek lambda node js backend saya. Tetapi kod yang sama dalam projek react frontend saya menyebabkan ralat ini apabila saya cuba untuk menyoal data.

users-list.tsx:9 error Error: Network error: url_1.URL is not a constructor
    at new ApolloError (ApolloError.ts:46)
    at ObservableQuery.getCurrentResult (ObservableQuery.ts:199)
    at QueryData.getQueryResult (QueryData.ts:333)
    at QueryData._this.getExecuteResult (QueryData.ts:140)
    at QueryData.execute (QueryData.ts:61)
    at useBaseQuery.ts:63
    at useDeepMemo (useDeepMemo.ts:18)
    at useBaseQuery (useBaseQuery.ts:62)
    at useQuery (useQuery.ts:11)
    at UsersList (users-list.tsx:6)
    at renderWithHooks (react-dom.development.js:14985)
    at updateFunctionComponent (react-dom.development.js:17356)
    at beginWork (react-dom.development.js:19063)
    at beginWork$1 (react-dom.development.js:23940)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at scheduleUpdateOnFiber (react-dom.development.js:21893)
    at dispatchAction (react-dom.development.js:16139)**strong text**

:

:

Anda boleh melihat bahawa versi bagi semua pakej yang saya gunakan adalah sama.

Kod Saya

Saya telah mencipta aplikasi React baru dengan yarn create react-app my-app --template typescript dan mencipta demo kecil masalah saya dalam repositori Github. (Tiada kelayakan IAM di dalam repositori tetapi anda masih boleh melihat masalah tersebut tanpa mereka)

Adakah sesiapa mempunyai idea;

• Apakah yang boleh menyebabkan masalah ini?
• Bagaimana saya boleh menyahpepijat ini?

Terima kasih

Jawapan #1

Saya telah memperbaiki masalah saya.

Saya telah mengemas kini aws4-axios

Di package.json diubah menjadi

"aws4-axios": "^2.0.1",