React コンポーネントのレンダリング時に発生するエラー "React.createElement: type is invalid -- expected a string" の解決方法

2024-04-02

React.createElement: type is invalid -- expected a string エラーは、React コンポーネントのレンダリング中に発生します。これは、type プロパティが不正な値を持っていることを意味します。

原因

このエラーは、以下の原因で発生します。

コンポーネント名が間違っている
- コンポーネント名のスペルミス
- 大文字と小文字の区別
- 存在しないコンポーネント名
コンポーネントがデフォルトエクスポートされていない
- コンポーネントファイルで export default を使用していない
- 誤った名前でコンポーネントをインポートしている
コンポーネントが正しくインポートされていない
- import 文のパスが間違っている
react-hot-loader の問題
- 古いバージョンの react-hot-loader を使用している
- react-hot-loader の設定が間違っている

解決策

以下の方法で解決できます。

コンポーネント名の確認
- 大文字と小文字の区別が間違っていないか確認する
- コンポーネントが存在することを確認する

補足

react-hot-loader を使用していない場合は、このエラーは発生しません。

// App.js

import React from 'react';
import ReactDOM from 'react-dom';

// コンポーネント名が間違っている
const MyComponent = () => {
  return <div>Hello, World!</div>;
};

ReactDOM.render(<MyComponent />, document.getElementById('root'));

このコードを実行すると、以下のエラーが発生します。

Error:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

このエラーを解決するには、コンポーネント名を正しく記述する必要があります。

// App.js

import React from 'react';
import ReactDOM from 'react-dom';

// コンポーネント名を正しく記述する
const MyComponent = () => {
  return <div>Hello, World!</div>;
};

ReactDOM.render(<MyComponent />, document.getElementById('root'));

このコードを実行すると、エラーが発生せずにコンポーネントがレンダリングされます。

以下のコードは、React.createElement: type is invalid -- expected a string エラーが発生するその他の例です。

コンポーネントがデフォルトエクスポートされていない

// MyComponent.js

export const MyComponent = () => {
  return <div>Hello, World!</div>;
};

// App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { MyComponent } from './MyComponent';

// コンポーネントがデフォルトエクスポートされていない
ReactDOM.render(<MyComponent />, document.getElementById('root'));

Error:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

// MyComponent.js

export default MyComponent;

const MyComponent = () => {
  return <div>Hello, World!</div>;
};

// MyComponent.js

export default MyComponent;

const MyComponent = () => {
  return <div>Hello, World!</div>;
};

// App.js

import React from 'react';
import ReactDOM from 'react-dom';

// コンポーネント名が間違っている
import { MyComponent } from './MyComponent';

ReactDOM.render(<MyComponent />, document.getElementById('root'));

Error:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

// App.js

import React from 'react';
import ReactDOM from 'react-dom';

// コンポーネント名を正しくインポートする
import MyComponent from './MyComponent';

ReactDOM.render(<MyComponent />, document.getElementById('root'));

React.createElement: type is invalid -- expected a string エラーは、コンポーネントの type プロパティが不正な値を持っている場合に発生します。このエラーを解決するには、コンポーネント名の確認、デフォルトエクスポートの確認、インポートの確認などを行う必要があります。

React.createElement: type is invalid -- expected a string エラーを解決するその他の方法

Babel の jsx プラグインを使用すると、JSX コードを JavaScript コードに変換することができます。このプラグインを使用すると、コンポーネント名を省略したり、デフォルトエクスポートを使用せずにコンポーネントをインポートしたりすることができます。

// .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-jsx"]
}

// App.js

import React from 'react';
import ReactDOM from 'react-dom';

// コンポーネント名を省略する
const MyComponent = () => {
  return <div>Hello, World!</div>;
};

ReactDOM.render(<MyComponent />, document.getElementById('root'));

TypeScript を使用すると、コンポーネントの型を定義することができます。型定義を使用すると、コンポーネント名のスペルミスや、誤った型の値を渡すエラーを防ぐことができます。

// MyComponent.tsx

export default MyComponent;

const MyComponent: React.FC = () => {
  return <div>Hello, World!</div>;
};

// App.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

ReactDOM.render(<MyComponent />, document.getElementById('root'));