axiosを使った際に、こんなエラーが出てしまいました。
zsh
TS2724: '"axios"' has no exported member named 'axios'. Did you mean 'Axios'?
その時のコードは下のようになっていたのですが、ここでエラーが起きていました。
typescript
import {axios, AxiosError} from 'axios';
このエラー解決で調べたことを書いていこうと思います。
原因
これは、axiosという名前付きエクスポートがないことが原因でした。
axiosはdefaultエクスポートされているモジュールであり。使用するには下のようのコードを修正する必要がありました。
import axios,{AxiosError} from 'axios';
名前付きエクスポートとdefaultエクスポートはJavascriptの定義したモジュールを外部機能として提供する方法です。
名前付きエクスポートというのは、下のようなコードで定義されているモジュールや値を指します。
export const
defaultエクスポートでは、下のようなコードで定義されているモジュールや値を指します。
export default const
それぞれの特徴は下のようになっています。
| 名前付きエクスポート | defaultエクスポート | |
|---|---|---|
| モジュール | 複数定義可能 | 一つだけ定義可能 |
| インポートの{} | 必要 | 不必要 |
| 名前 | エクスポート時の名前と合わせる | 任意の名前に設定可能 |
名前付きエクスポートとdefaultエクスポートの使い分け方
一般的に二つのエクスポートは以下のような使い分け方をします。
| エクスポート | 使い方 |
|---|---|
| 名前付きエクスポート | 一部分の機能だけを使わせたい時 |
| defaultエクスポート | メイン機能を提供したいとき |
今回のエラーが出たのはNext.jsで執筆していた時に起きたのですが、Next.jsではメイン機能として提供するコンポーネント(page.tsxとか)はdefaultエクスポート、多くの箇所で使い回すコンポーネントは名前付きエクスポートで使い分けていました。
使い分け方のイメージとしてもしっくりくるなと個人的に思いました。