🚢
デフォルトエクスポートのインポートで詰まった話
以下の動画を参考にReactでTodoリストアプリを作成していた際、初歩的なことではあると思いますがちょっと詰まった箇所があったので共有します。
状況
外部モジュール(TodoList.js)からexport defaultしたメンバー(TodoList)をインポートしようとした時、モジュール側ではexport、インポートする側ではimport文をそれぞれ書いているはずなのに以下のエラーが出ていました。
export 'TodoList' (imported as 'TodoList') was not found in './TodoList' (possible exports: default)
対処
import文を以下のように修正することで解決しました。
// 修正前
import { TodoList } from "./TodoList";
// 修正後
import TodoList from "./TodoList";
原因
export defaultしたメンバーをインポートする際は、{}はつけないのが決まりだそうです。今回TodoList.jsは以下のようにexport defaultしていたので{}が不要だったという話でした。
TodoList.js
import React from 'react'
import Todo from './Todo'
const TodoList = ({ todos, toggleTodo }) => {
return todos.map(todo => <Todo todo={todo} key={todo.id} toggleTodo={toggleTodo} />);
}
export default TodoList
余談
ちなみに、デフォルトエクスポートしているメンバー以外のメンバーもまとめてインポートしたい際は、デフォルトエクスポートされているメンバーは{}をつけず、それ以外に{}をつけてインポートするようです。
import defaultMember, { otherMember } from 'XXXXX';
参考文献
「これからはじめるReact実践入門 コンポーネントの基本からNext.jsによるアプリ開発まで」
Discussion