【Amplify】The declaration was marked as deprecated here.の警告の回避方法

7月 16, 2022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);

打ち消し線が消えました。めでたし、めでたし。