Component cannot be used as a JSX component. Its return type 'Element[]' is not a valid JSX element

問題の概要

React + TypeScriptのプロジェクトで、次のエラーが発生しています：

'Todos' cannot be used as a JSX component.
  Its return type 'Element[]' is not a valid JSX element.
    Type 'Element[]' is missing the following properties from type 'Element': type, props, key

このエラーは、JSXコンポーネントが単一のJSX要素ではなく、要素の配列（Element[]）を返そうとしている場合に発生します。

エラーの原因

問題のコード例：

function Todos(): JSX.Element[] {
  // ...
  return todos.map((todo) => (
    <>
      <div>
        <Todo todo={todo} />
      </div>
    </>
  ));
}

このコードでは、Todosコンポーネントが複数の<div>要素の配列を返そうとしています。しかし、Reactコンポーネントは単一のJSX要素（またはnull）を返す必要があります。

解決策

1. フラグメントでラップする（推奨）

最も簡単な解決策は、返される要素をフラグメント（<>...</>）でラップすることです：

function Todos(): JSX.Element {
  const todos = useSelector((state: RootState) => state.todos);
  const footer = useSelector((state: RootState) => state.footer);

  if (footer.hideAll) {
    if (footer.showCompleted) {
      return (
        <>
          {todos
            .filter((todo) => !todo.completed)
            .map((todo, index) => (
              <ul key={index}>
                <Todo todo={todo} />
              </ul>
            ))}
        </>
      );
    }
    return (
      <>
        {todos.map((todo, index) => (
          <div key={index}>
            <Todo todo={todo} />
          </div>
        ))}
      </>
    );
  }

  return <>{todos.map((_, index) => <div key={index} />)}</>;
}

重要

各map関数内の要素には一意のkeyプロパティを追加することを忘れないでください。これはReactが要素の変更を追跡するために必要です。

2. TypeScript設定の調整

場合によっては、TypeScriptの設定が原因でこのエラーが発生することがあります。以下の解決策を試してください：

tsconfig.jsonの調整

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "paths": {
      "react": ["./node_modules/@types/react"]
    },
    "allowSyntheticDefaultImports": true
  }
}

package.jsonの調整

{
  "resolutions": {
    "@types/react": "^18.2.6",
    "@types/react-dom": "^18.2.6"
  }
}

3. 依存関係の確認と更新

古いバージョンの@types/reactが原因でこのエラーが発生することがあります：

# 依存関係を更新
npm update @types/react @types/react-dom

# またはクリーンインストール
rm -rf node_modules package-lock.json
npm install

4. 型定義の明示

コンポーネントの型を明示的に指定します：

const Todos: React.FC = () => {
  // コンポーネントの実装
  return (
    // JSX要素
  );
};

その他の原因と解決策

未定義の返り値

コンポーネントがすべての条件分岐で値を返さない場合：

function MyComponent({ status }) {
  switch (status) {
    case 'loading':
      return <div>Loading...</div>;
    case 'success':
      return <div>Success!</div>;
    // すべての場合をカバーするためにdefaultを追加
    default:
      return <div>Unknown status</div>;
  }
}

インポートの誤り

デフォルトエクスポートと名前付きエクスポートの混同：

// 誤り
import Picker from '@react-native-picker/picker';

// 正しい
import { Picker } from '@react-native-picker/picker';

まとめ

「Component cannot be used as a JSX component」エラーは主に以下の原因で発生します：

1. コンポーネントが配列を返そうとしている
2. TypeScriptの型定義の問題
3. 依存関係のバージョン不一致
4. コンポーネントが未定義を返す可能性がある

最も一般的な解決策は、返される要素をフラグメントでラップし、TypeScriptの設定と依存関係を適切に管理することです。

注意

一時的な対処としてfunction Todos(): anyのように型を緩める方法もありますが、これは型安全性を損なうため最終手段としてのみ使用してください。

正しい型定義とReactのベストプラクティスに従うことで、このエラーを効果的に解決できます。