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

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

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'