React好きの少年「あそこを見て！デフォルトインポートと名前付きインポートが混在しているよ！」

ある日

React好きの少年「磯野！Reactしようぜ！」
ワイ「ええで、とりあえずコンポーネントをexport/importしてと。」

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Reactのプロジェクトを始めようとしてexport / importでつまづいたところを書いてみます。
しょうもないミスだけど初心者の人は気づきにくいところかも。

前提：実行環境はCodesandboxです。

これでexportして

export const App =()=> {
・・・省略・・・
};

importすると

import App from './App.jsx'

エラーをもう一度見てみると、

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

直訳すると「要素のタイプが無効です: 文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) を期待したのに、: undefined と表示されました。コンポーネントを定義されたファイルからエクスポートし忘れたか、デフォルトインポートと名前付きインポートが混在している可能性があります。」

いろんな記事を見てみたがどれも当てはまりそうにありませんでした。

• 【React】「Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.」エラーの対処法
• 【React】Element type is invalid: expected a stringの対処法

ただ、このエラーはexportやimportによく見られるものだということは確定したのでdefaultについても調べてみる。

• export dedaultについての記事

defaultはexportしたものに任意の名前などをつけてImportできるんだそうです。なるほど。
天下のMDNでImportの方法を調べてみます。
MDN Import

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";

ここで、通常のexportは{}がいる、と気づきます。
先程の

import App from './App.jsx'

を

import {App} from './App.jsx'

に変えてみると、

治りました。
つまりexportだけでなくimportの方法にも注意が必要ってことでした。エラーメッセージの

デフォルトインポートと名前付きインポートが混在している可能性があります。

の部分が教えてくれました。

時間かかりましたが色々調べて学びもあったのでOKです。