ライブラリ 読み込めない

Question

国際電話番号が選べるプルダウンを作りたく下記のライブラリをimportしました。
実行してみたのですがVscode上で⑴のエラーが画面上で⑵のエラーが出てしまい。画面が真っ白になってしまいます。
どうしたらいいのでしょうか？

//@ts-ignore
import PhoneInput from 'react-phone-input-2';
import 'react-phone-input-2/lib/style.css';

⑴

ジュール 'react-phone-input-2' の宣言ファイルが見つかりませんでした。'/Users/node_modules/react-phone-input-2/lib/lib.js' は暗黙的に 'any' 型になります。
  Try `npm install @types/react-phone-input-2` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-phone-input-2';`ts(706)

⑵

ncaught Error: Cannot find module 'react-phone-input-2'
    at webpackMissingModule

＊追記

  const onChangeWithKey = (key: string, value: string | number) => {
    setState({
      ...state,
      newUser: Object.assign({}, state.user, { [key]: value }),
    });
  };


  <PhoneInput
    country={'ja'}
    value={user.phoneNumber}
    onChange={(e: number) => onChangeWithKey(e)}
  />

Comments

[mottox2]

どういった環境でやっていますか？
* Create React App
* Next.js
* 独自でwebpackファイルを作成

[yyyooo34343]

webpackは使っています。
next.jsは使って無いです。
create react Appとはどういうことでしょうか？

[yyyooo34343]

npm startで実行。
react + typescriptです

[mottox2]

Create React AppはReactのボイラープレート（開発テンプレート）を生成するツールのことです。

[yyyooo34343]

使ってないと思います

[yyyooo34343]

正直わからないです。

[hoshi-takanori]

ライブラリを使う前に、まず JavaScript/TypeScript 言語そのものや、React の正しい使い方を勉強した方が良いのでは。自分で何も理解せずに、ただ他人に聞いた通りにコードを書いても意味ないですよ。

Answer 1

自分でwebpackを使っているということなので、おそらく原因はCSSを読み込む設定が足りていないからだと思います。
具体的な方法は紹介しませんが、css-loaderを使うことでCSSを読み込めるようになります。

自分で設定が面倒なのであれば、Create React Appで作った環境での開発をおすすめします

Create React Appについて
https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app

Create React AppでTypeScriptを使う方法
https://ja.reactjs.org/docs/static-type-checking.html#using-typescript-with-create-react-app

Comments

[yyyooo34343]

すいません。npmを再実行したところエラーメッセージが変わったので変えました。
cssのエラーはなくなったのですが eact-phone-input-2　が読み込めないエラーが出てしまいました

[mottox2]

```
npm install react-phone-input-2
```
を実行して開発サーバーを再起動してみたらどうでしょう？

[yyyooo34343]

エラー変わりました！！
Uncaught TypeError: e.value.replace is not a functionというエラーが出るようになりました

[yyyooo34343]

上記にimportしたライブラリのコンポーネントを追記しました

[mottox2]

ライブラリは読み込めたので後は、自分で書いたコードに問題がありそうです。

* user.photoNumberがnullやundefinedになっていないか
* onChangeWithKeyに怪しい処理を書いていないか

を確認すれば解決に向かうかと！

[yyyooo34343]

上記のコンポーネントをコメントアウトにすればエラー表示されずに画面が表示されるのですが上記のコンポーネントがあるとエラーになり画面が真っ白になります。

[yyyooo34343]

onChangeWithKeyは共通で使っている処理なので怪しいところはないです

[mottox2]

<PhoneInput
country={'ja'}
value={user.phoneNumber || ''}
onChange={(e: number) => onChangeWithKey(e)}
/>

とするとどうなります？

[yyyooo34343]

変わらなかったです

[mottox2]

一旦ライブラリの読み込みは出来てそうなので、別途質問を立ち上げることをおすすめします。
`onChangeWithKey`の情報等が全くないので、ソースコードも合わせて乗せるといいかと思います

[yyyooo34343]

すいません。先ほどonChangeWithKeyのソースは載せました!!!