React 19.1导入组件时出现Element type is invalid错误求助

我在React 19.1中编写了如下Header组件：

import React from 'react';
import { NavigationHeader, Menu, Button, Avatar } from '@sanofi-accelerator/elements';

const Header = () => {
  return (
    <NavigationHeader
      logo={{
        src: '/assets/SanofiLogo.png',
        alt: 'Sanofi',
        onClick: () => window.location.href = '/'
      }}
      title="SIPS"
      rightActions={
        <>
          <Menu
            trigger={<Button variant="ghost">Help</Button>}
            items={[
              { label: 'FAQ', onClick: () => alert('Go to FAQ') },
              { label: 'Contact Support', onClick: () => alert('Go to Support') }
            ]}
          />
          <Menu
            trigger={<Avatar initials="MC" />}
            items={[
              { label: 'Logout', onClick: () => alert('Logged Out') }
            ]}
          />
        </>
      }
    />
  );
};

export default Header; 

随后我在Home组件中导入该Header组件，代码如下：

import React from "react";
import Header from "../../components/header/Header"; // Importing header here 

function Home() {
  return (
    <>
      <Header />
    </>
  );
}

export default Home;

项目结构：

遇到的错误：

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

Check the render method of `Header`.  
    at createFiberFromTypeAndProps (react-dom-client.development.js:4259:28)  
    at createFiberFromElement (react-dom-client.development.js:4273:14)  
    at reconcileChildFibersImpl (react-dom-client.development.js:7879:31)  
    at react-dom-client.development.js:8057:33  
    at reconcileChildren (react-dom-client.development.js:8621:13)  
    at updateFunctionComponent (react-dom-client.development.js:8914:7)  
    at beginWork (react-dom-client.development.js:10522:18)  
    at runWithFiberInDEV (react-dom-client.development.js:1519:30)  
    at performUnitOfWork (react-dom-client.development.js:15132:22)  
    at workLoopSync (react-dom-client.development.js:14956:41)

这个错误的核心是Header组件渲染时用到的某个元素不是合法的React组件（被识别为object），从代码和场景来看，大概率和第三方库@sanofi-accelerator/elements的使用有关，按以下步骤排查修复：

• 修正第三方组件的导入方式
  确认@sanofi-accelerator/elements的组件导出规则，若组件是默认导出而非命名导出，当前的导入写法会导致拿到undefined或无效对象。尝试改为逐个导入：

  import NavigationHeader from '@sanofi-accelerator/elements/NavigationHeader';
  import Menu from '@sanofi-accelerator/elements/Menu';
  import Button from '@sanofi-accelerator/elements/Button';
  import Avatar from '@sanofi-accelerator/elements/Avatar';
  

  也可以查阅该库的官方文档，确认正确的导入语法。

• 验证React版本兼容性
  React 19存在API和行为变化，检查@sanofi-accelerator/elements是否支持React 19。若版本不兼容，会导致组件无法正常初始化。可以尝试升级该库到最新版本，或临时降级React到18.x版本测试。

• 检查组件导入路径
  从项目结构看，Header组件的路径为src/components/header/Header，Home组件的导入路径../../components/header/Header可能存在后缀缺失问题（部分React项目需要明确指定.jsx/.js后缀）。尝试修改为：

  import Header from "../../components/header/Header.jsx";
  

• 替换React.Fragment语法
  极少数情况下React 19对<>简写语法的编译可能存在异常，尝试替换为完整的<React.Fragment>标签：

  rightActions={
    <React.Fragment>
      <Menu
        trigger={<Button variant="ghost">Help</Button>}
        items={[
          { label: 'FAQ', onClick: () => alert('Go to FAQ') },
          { label: 'Contact Support', onClick: () => alert('Go to Support') }
        ]}
      />
      <Menu
        trigger={<Avatar initials="MC" />}
        items={[
          { label: 'Logout', onClick: () => alert('Logged Out') }
        ]}
      />
    </React.Fragment>
  }
  

• 调试组件类型
  在Header组件开头添加日志，确认导入的第三方组件是否有效：

  import React from 'react';
  import { NavigationHeader, Menu, Button, Avatar } from '@sanofi-accelerator/elements';
  
  console.log('NavigationHeader:', NavigationHeader); // 正常应为function或类组件对象，若为undefined则导入错误
  console.log('Menu:', Menu);
  
  const Header = () => {
    // 原组件代码
  };
  

  若输出为undefined，说明导入方式完全错误，需重新确认库的导出规则。

内容的提问来源于stack exchange，提问作者Ajay Kulkarni