【Amplify】The declaration was marked as deprecated here.の警告の回避方法
next.js
動作環境
amplify & next.js (2022年7月)
npm list -g
├── @aws-amplify/cli@9.1.0
├── npm@8.1.0
npm list
├── @aws-amplify/api@4.0.45
├── @aws-amplify/core@4.5.9
├── @aws-amplify/pubsub@4.4.6
├── @aws-amplify/ui-react@1.2.25
├── @types/node@18.0.3
├── @types/react@18.0.15
├── aws-amplify@4.3.27
├── eslint-config-next@12.2.2
├── eslint@8.19.0
├── next@12.2.2
├── react-dom@18.2.0
├── react@18.2.0
└── typescript@4.7.4
具体的な警告の内容
以下のようにamplifyの文字に打ち消し線が引かれている状態で、コレを直したい。
Amplify.configure(awsmobile);
打ち消し線にカーソルを重ねると、以下のようなポップアップが表示されます。
(alias) const Amplify: AmplifyClass
import Amplify
'default' is deprecated.ts(6385)
index.d.ts(28, 4): The declaration was marked as deprecated here.
import Amplify の書き方が非推奨だと解釈しました。
実際のコード
import Amplify from '@aws-amplify/core';
import PubSub from '@aws-amplify/pubsub';
import API, { graphqlOperation } from '@aws-amplify/api';
import * as React from "react";
import { useState } from 'react';
import awsmobile from '../src/aws-exports';
Amplify.configure(awsmobile);
API.configure(awsmobile);
PubSub.configure(awsmobile);
実際にはamplifyだけでなく、PubSubにも、打ち消し線が表示されている状態です。
警告を出さなくする方法
import Amplify from '@aws-amplify/core’;を
import {Amplify} from '@aws-amplify/core’;に変更すると打ち消し線が消えます。
import {Amplify} from '@aws-amplify/core';
import {PubSub} from '@aws-amplify/pubsub';
import API, { graphqlOperation } from '@aws-amplify/api';
import * as React from "react";
import { useState } from 'react';
import awsmobile from '../src/aws-exports';
Amplify.configure(awsmobile);
API.configure(awsmobile);
PubSub.configure(awsmobile);
打ち消し線が消えました。めでたし、めでたし。
関連記事

> Build optimization failed: found page without a React Component as default export in pages/xxxxxxx のエラー
動作環境 nextjs 解決方法 pages/xxxxx.tsx のファイルの中 ...

const [ session ] = useSession()でエラーになるのを解決
タイトルが適当ではない気がしますが・・・。検索で引っかかればOK的な感じです。 ...

{“code”:”BadRequest”,”message”:”The server did not understand the operation that was requested.”,”type”:”client”}のエラー
動作環境 next.jsnode v16.13.0amplify NextAut ...

Binding element ‘name’ implicitly has an ‘any’ type. のエラー
動作環境 nextjs エラーの出ているコード (ファイル名:_app.tsx) ...

Next.jsのエラーの解消
Build optimization failed: found pages w ...