react-modalのimport関係のトラブル

Question

前提・実現したいこと

import Modal from 'react-modal'を使い
モーダルを表示したい。

ですが、importエラーや起動時にエラーが発生してしまう。
※詳細は以下に

発生している問題・エラーメッセージ

import Modal from "react-modal";
を行う際に、エラーが発生する。

1. package.jsonに

"react-modal": "3.11.2",
を記載し、npm installを実行すると
import文が赤く表示され、カーソルをあてると以下のエラーが発生する。

Could not find a declaration file for module 'react-modal'. '/$パス/react-app/node_modules/react-modal/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-modal` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-modal';`

1. npm install @types/react-modalとしろとあるので、pacakge.jsonの内容を書き直して

再度npm installを実施し、そのあとに@typesのインストールを実施。
するとimport文のエラーが消えたため、npm startを実行する
すると以下のエラーが発生する。

Module not found: Can't resolve 'react-modal' in '実装ファイルのパス'

他の場所から解決方法がないかと思い、
https://stackoverflow.com/questions/52761075/react-could-not-find-a-declaration-file-for-module-react-vis?noredirect=1&lq=1
以下のサイトから
xxx.d.tsファイルに

declare module 'react-vis';</br>

などを書け？など類似した事象があるのですが(認識違いだったらすみません)、
どこに何を記載するのかなどよく分らず困っています。

次に何をすべきなのでしょうか？
const yourModuleName = require('module-name');
もためしはしましたが、エラーが出ますし、他の構文にあっていないため、
記載は不可です。
そもそも型定義ファイル.d.tsが何者かもわかっていない状態です。

よろしくお願いします。

Comments

[maisumakun]

TypeScriptのビルド環境はどのように構築しましたか？

[takasan2]

すみません、package.jsonの中身を記入すればいいでしょうか？

Answer 1

javascritで書かれたモジュールをtypescriptのソースでインポートして使う時は、モジュールと型定義ファイルを両方ともインストールする必要があります。

.d.tsファイルは、型定義ファイルが用意されていない時に自分で作るんだと思います。

Comments

[takasan2]

ありがとうございます。
参考にさせていただきます。

Answer 2

npm install --save react-modal @types/react-modal
でコンポーネントと型定義ファイルを一緒にインストールしてみて下さい。最新バージョンが希望のバージョンなので、気にせずインストールが可能だと思います。

Comments

[takasan2]

ありがとうございます。
動作が確認できました。
助かりました。