今回は、React × Next.js × TypeScriptを用いた開発を行う上で発生したエラーの解決法(対処法)について、ご紹介します。
発生したエラーとその背景
フロントに関する作業用のブランチをローカルにクローンし、作業を始めようとしたら使いたいhooks(関数)が読み込めませんでした。
importしようとしたuseState, useEffectの下に赤線が引かれており、カーソルをあてると以下のようなエラーが表示されました。
react has no exported member useState,useEffect原因
@types/node(*1)が導入されている環境で、@types/reactをインストールしていなかったから。
JavaScriptではなく、TypeScriptを使用している現場では、@types/nodeを導入している可能性が高いため、慣れていないと躓きやすい部分です。。
*1 Node.jsをTypeScriptで使用する際に、Node.js上の型に関する情報を提供する(型の補完をしてくれる)ライブラリになってます。
対処法
pakage.jsonもしくは、yarn.lockを確認し、@types/reactがインストールされているか確認してください。
もし、インストールされていない場合は、以下のコマンドでインストールをしましょう。
npm install @types/react
もしくは
yarn add @types/react
npmでインストールした例にはなりますが、以下のようにエラーなくインストールが出来ればOKです。
また、インストールが終わったらエラーが解消されているか確認してみましょう。
もし改善されない場合
reactをインストール済みか確認しましょう。
バージョンは、@types/reactとあっているのがベストです。
もし、インストールされていない場合は、
npm i
もしくは
npm i reactを実行してみましょう。
また、使用しているエディタ(VSCodeなど)の再起動もお試しください。
まとめ
- react has no exported member { hooksの関数名 }というエラーが発生する原因は、適切なライブラリがインストールされていないから
- 対処法は、@types/reactのインストール。
- もし、@types/reactをインストールしても改善されない場合は、reactの再インストールとエディタの再起動を試みる。
コメント