from 30

30歳からwebエンジニアになったけど、思ったよりも苦しいので、その苦闘の記録をば

【エラー対処】"graphql/error/GraphQLError" has no exported member 'GraphQLError'. について

状況

aws/codebuild/standard:4.0イメージ で実施されているCodeBuild上で、

$ npm run build

した際に、以下のエラーが発生した。
macのlocal上では再現できず解決に手間取った。

[fatal] Nuxt build error
  ERROR in node_modules/@aws-amplify/api-graphql/lib-esm/types/index.d.ts
  ERROR in node_modules/@aws-amplify/api-graphql/lib-esm/types/index.d.ts(1,10):
  1:10 Module '"graphql/error/GraphQLError"' has no exported member 'GraphQLError'.
  > 1 | import { GraphQLError } from 'graphql/error/GraphQLError';
  |          ^
  2 | import { DocumentNode } from 'graphql/language/ast';
  3 | export interface GraphQLOptions {
  4 |     query: string | DocumentNode;

   ╭─────────────────────────────╮
   │                             │
   │   ✖ Nuxt Fatal Error        │
   │                             │
   │   Error: Nuxt build error   │
   │                             │
   ╰─────────────────────────────╯

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gyopro-frontend@1.0.0 build: `nuxt-ts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the gyopro-frontend@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-09-08T05_25_22_503Z-debug.log

環境

  • Nuxt.js v.2.14.4
  • Typescript
  • CodeBuild > Image: aws/codebuild/standard:4.0

対処法

/vue-shim.d.tsに明示的にanyを追加してひとまずは回避した。

declare module 'graphql/error/GraphQLError' {
  export type GraphQLError = any
}

雑感

本当に対象療法しか書けずに情けない。。。
仕事では別の人がフロントは書いていて、デプロイ時にエラーが発覚した時とか、
バックエンドAPIとの繋ぎ込みとかでちょっと手直しするだけなので、
率直にいうとTypescriptのことは全然わかっていません。。。

時間見つけてやらないとなとは思いつつ、 単純なTypscriptのSyntaxの読み物はけっこうあるんですが、 nuxtやvueとの絡みで学べるリソースが少ない(と私が誤解しているだけかも)のが 悩みどころ。。。