無料相談

Node.js

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object の原因と直し方【Dockerで検証済み】

Node.js

Uncaught Error: Invariant Violation: Element type is invalid: expected a string … の原因と解決方法。検証済みの解決コマンド付きで、現象→原因→解決→確認の順に最短で直せます。

エラー出力

このエラーが出ていませんか

エラー出力
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
結論

結論

結論：まずこれで直ります

このエラーは React がコンポーネントをレンダリングしようとした際、渡された型（type）が文字列でも関数でもなく「object」だった場合に発生します。下の解決コマンドを順に実行すれば直ります。

解決コマンド
cd /app && cat > correct_import.js << 'EOF'
const React = require('react');

// 修正: named export から正しくコンポーネント関数を取り出す
const FakeModule = { MyComponent: function MyComponent() { return null; } };

// 正しくプロパティとしてアクセスしてコンポーネント関数を取得する
const MyComponent = FakeModule.MyComponent;

try {
  const type = MyComponent;
  if (typeof type !== 'string' && typeof type !== 'function') {
    throw new Error(
      'Invariant Violation: Element type is invalid: expected a string ' +
      '(for built-in components) or a class/function but got: ' +
      (type === null ? 'null' : typeof type)
    );
  }
  // React.createElement に正しい関数を渡せる
  const element = React.createElement(type, null);
  console.log('OK: element type is', typeof type, '- createElement succeeded');
} catch(e) {
  console.error('Error:', e.message);
  process.exit(1);
}
EOF
node correct_import.js
現象

どんなエラーか

次の操作を行うと（検証環境: node:20）、上記のエラーが発生します。まずは下の再現コマンドで、同じ状況を再現できることを確認してください。

検証環境：node:20

再現コマンド
mkdir -p /app && cd /app && cat > package.json << 'EOF'
{
  "name": "test-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}
EOF
npm install --silent
cat > wrong_import.js << 'EOF'
const React = require('react');

// 誤り: named export をデフォルトインポートのように扱う
// 例: import MyComponent from './MyComponent' のつもりが
// module.exports = { MyComponent } のファイルから引っ張ると object になる
const FakeModule = { MyComponent: function() { return null; } };

// ここでは FakeModule そのもの（object）を Element type として渡す
try {
  const element = React.createElement(FakeModule, null);
  // React 18 では createElement 時点では例外が出ないが render 時に出る
  // ここでは型チェックを直接シミュレート
  const type = FakeModule;
  if (typeof type !== 'string' && typeof type !== 'function') {
    throw new Error(
      'Invariant Violation: Element type is invalid: expected a string ' +
      '(for built-in components) or a class/function but got: ' +
      (type === null ? 'null' : typeof type)
    );
  }
} catch(e) {
  console.error('Uncaught Error:', e.message);
  process.exit(1);
}
EOF
node wrong_import.js
原因

なぜ起きるのか

このエラーは React がコンポーネントをレンダリングしようとした際、渡された型（type）が文字列でも関数でもなく「object」だった場合に発生します。最も多い原因は import/require の書き方のミスです。 例えば、あるファイルが `export { MyComponent }` のように named export していると、 `import MyComponent from './MyComponent'` (default import) で受け取ると オブジェクト全体（{ MyComponent: [Function] }）が入ってしまい、関数ではなく object になります。 他にも `module.exports = { MyComponent }` のファイルを `const MyComponent = require('./MyComponent')` で受け取った場合も同様です。 【修正方法】 1. named export なら named import で受け取る: `import { MyComponent } from './MyComponent'` 2. default export なら default import で受け取る: `import MyComponent from './MyComponent'` 3. CommonJS の場合: `const { MyComponent } = require('./MyComponent')` 要するに、export の種類と import の書き方を一致させることが根本的な解決策です。

解決

解決手順

修正コマンド
cd /app && cat > correct_import.js << 'EOF'
const React = require('react');

// 修正: named export から正しくコンポーネント関数を取り出す
const FakeModule = { MyComponent: function MyComponent() { return null; } };

// 正しくプロパティとしてアクセスしてコンポーネント関数を取得する
const MyComponent = FakeModule.MyComponent;

try {
  const type = MyComponent;
  if (typeof type !== 'string' && typeof type !== 'function') {
    throw new Error(
      'Invariant Violation: Element type is invalid: expected a string ' +
      '(for built-in components) or a class/function but got: ' +
      (type === null ? 'null' : typeof type)
    );
  }
  // React.createElement に正しい関数を渡せる
  const element = React.createElement(type, null);
  console.log('OK: element type is', typeof type, '- createElement succeeded');
} catch(e) {
  console.error('Error:', e.message);
  process.exit(1);
}
EOF
node correct_import.js
確認

直ったか確認する

確認コマンド
cd /app && node correct_import.js && echo 'PASS: component type is valid function'
動画

動画で見る

#Node.js#javascript#uncaught#invariant#violation#element#invalid

この手順でも直らない場合は。

エラー文をそのまま貼り付けて送っていただければ、原因の当たりをつけてお返しします。 ヒアリングは無料です。業務システムの内製化・保守のご相談も受け付けています。

無料相談を申し込む

Related

関連する記事。

無料相談（ヒアリング0円）
無料相談0 YEN