React Nativeの「Element type is invalid」エラー：原因と解決方法

React Native開発で頻出するエラーの一つである「Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object」について、その原因と解決方法を詳細に解説します。

問題の概要

このエラーは、Reactコンポーネントのインポート/エクスポートが正しく行われていない場合に発生します。元の質問では以下のようなコードでエラーが発生していました：

jsx

import CustomInput from '../../components/CustomInput';

const SignInScreen = () => {
  return (
    <View style={styles.root}>
      <Image source={Logo} style={[styles.logo, {height: height * 0.3}]} resizeMode="contain" /> 
      <CustomInput />  {/* ← ここでエラー発生 */}
    </View>
  );
};

主な原因と解決策

1. エクスポート/インポートの形式ミス（最も一般的）

Reactコンポーネントには名前付きエクスポートとデフォルトエクスポートの2種類があります。

名前付きエクスポート (Named Export)

jsx

// コンポーネント定義
export const CustomInput = () => {
  return <View>...</View>;
};

// インポート（中括弧が必要）
import { CustomInput } from '../../components/CustomInput';

デフォルトエクスポート (Default Export)

jsx

// コンポーネント定義
const CustomInput = () => {
  return <View>...</View>;
};

export default CustomInput;

// インポート（中括弧は不要）
import CustomInput from '../../components/CustomInput';

WARNING

エクスポート形式とインポート形式を一致させることが重要です。デフォルトエクスポートを名前付きインポートしようとすると、undefinedが返され、このエラーが発生します。

2. パスの指定ミス

ファイルパスや拡張子の指定が間違っている場合：

jsx

// 間違い：フォルダのみ指定（index.jsがある場合に問題が発生）
import CustomInput from '../../components/CustomInput';

// 正しい：完全なファイルパスを指定
import CustomInput from '../../components/CustomInput/CustomInput.js';

3. 大文字小文字の区別

ファイルシステムによっては大文字小文字を区別するため、正確なファイル名でインポートする必要があります：

jsx

// 間違い：大文字小文字の不一致
import Flatlist from './Flatlist';  // 実際のファイル名は FlatList.js

// 正しい：正確なファイル名
import FlatList from './FlatList';

4. 自動インポート機能の問題

VS CodeなどのIDEの自動インポート機能が誤った形式を生成することがあります：

jsx

// 間違い：デフォルトインポート（コンポーネントが名前付きエクスポートの場合）
import Modal from '@fluentui/react/lib/Modal';

// 正しい：名前付きインポート
import { Modal } from '@fluentui/react/lib/Modal';

その他の解決方法

キャッシュのクリアと再インストール

node_modulesのキャッシュ問題が原因の場合：

json

// package.json
"scripts": {
  "install:clean": "rm -rf node_modules && rm -f package-lock.json && npm install"
}

bash

npm run install:clean

IDEの再起動

開発環境の問題を解消するために：

VS Code: Ctrl+Shift+P → "Developer: Reload Window"
ターミナルで開発サーバーを再起動

ファイルの保存状態の確認

未保存のファイルがあると、コンポーネントが正しく読み込まれないことがあります。すべてのファイルが保存されていることを確認してください。

デバッグのヒント

エラーの原因を特定するための方法：

コンポーネントの確認: 問題のコンポーネント（例: CustomInput）が正しくエクスポートされているか確認
インポート文の確認: デフォルト/名前付きインポートの形式が正しいか

コンソールログでの確認:

jsx

console.log(CustomInput); // undefinedの場合はインポートに問題あり

段階的に排除: コンポーネントを一時的にコメントアウトして、問題を特定

予防策

一貫したエクスポート形式の使用（チームで統一）
TypeScriptの使用（型チェックでインポートエラーを検出）
絶対パスインポートの設定（相対パスによるミスを減少）

jsx

// jsconfig.json または tsconfig.json で絶対パスを設定
{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

// 使用例
import CustomInput from 'components/CustomInput';

まとめ

「Element type is invalid」エラーは、主にコンポーネントのインポート/エクスポートに関する問題が原因です。エクスポート形式とインポート形式の一致、ファイルパスの正確さ、IDEの自動インポート機能の確認など、基本的な事項を注意深く確認することで、ほとんどの場合解決できます。

React Native開発において、コンポーネントのインポート/エクスポートの仕組みを正しく理解することは、このようなエラーを回避し、効率的な開発を行うために不可欠です。

関連記事

React Nativeの「Element type is invalid」エラー：原因と解決方法 ​

問題の概要 ​

主な原因と解決策 ​

1. エクスポート/インポートの形式ミス（最も一般的） ​

名前付きエクスポート (Named Export) ​

デフォルトエクスポート (Default Export) ​

2. パスの指定ミス ​

3. 大文字小文字の区別 ​

4. 自動インポート機能の問題 ​

その他の解決方法 ​

キャッシュのクリアと再インストール ​

IDEの再起動 ​

ファイルの保存状態の確認 ​

デバッグのヒント ​

予防策 ​

まとめ ​