Javascript React.createElement类型无效[与其他类似帖子不同的错误]

我的困境是：一切都正确编译，django服务器运行良好；但是，开发人员工具显示了相同的错误注意：在stack overflow和github上还有其他类似的帖子；然而，我已经通读了所有这些，并尝试了每一个建议的答案，但都没有用以下是我的错误截图：

我的项目是react/django项目，因此我目前有一个名为“DataGetching.js”的文件，它从api中提取信息，我试图通过在App.js中调用此组件在屏幕上显示该api。随着我作为一名开发人员的成长，我在App.js中实现了一个导航栏，以尝试了解api和react组件之间的交互。以下是我的App.js、webpack、index.js、index.html、DataFetching.js、我的文件结构和package.json

文件结构：

App.js:

import './index.css';
import { ReactComponent as BellIcon } from './icons/bell.svg';
import { ReactComponent as MessengerIcon } from './icons/messenger.svg';
import { ReactComponent as CaretIcon } from './icons/caret.svg';
import { ReactComponent as PlusIcon } from './icons/plus.svg';
import { ReactComponent as CogIcon } from './icons/cog.svg';
import { ReactComponent as ChevronIcon } from './icons/chevron.svg';
import { ReactComponent as ArrowIcon } from './icons/arrow.svg';
import { ReactComponent as BoltIcon } from './icons/bolt.svg';
import DataFetching from "../DataFetching";
import React, { useState, useEffect, useRef} from 'react';
import { CSSTransition } from 'react-transition-group';



function App() {
  return (
    <div className="App">
      <DataFetching />
      <Navbar>
        <NavItem icon={<PlusIcon />} />
        <NavItem icon={<BellIcon />} />
        <NavItem icon={<MessengerIcon />} />
        <NavItem icon={<CaretIcon />}>
          <DropdownMenu></DropdownMenu>
        </NavItem>
      </Navbar>
    </div>
  );
}


function Navbar(props) {
  return (
    <nav className="navbar">
      <ul className="navbar-nav">{props.children}</ul>
    </nav>
  );
}

function NavItem(props) {
  const [open, setOpen] = useState(false);

  return (
    <li className="nav-item">
      <a href="#" className="icon-button" onClick={() => setOpen(!open)}>
        {props.icon}
      </a>

      {open && props.children}
    </li>
  );
}

function DropdownMenu() {
  const [activeMenu, setActiveMenu] = useState('main');
  const [menuHeight, setMenuHeight] = useState(null);
  const dropdownRef = useRef(null);

  useEffect(() => {
    setMenuHeight(dropdownRef.current?.firstChild.offsetHeight)
  }, [])

  function calcHeight(el) {
    const height = el.offsetHeight;
    setMenuHeight(height);
  }

  function DropdownItem(props) {
    return (
      <a href="#" className="menu-item" onClick={() => props.goToMenu && setActiveMenu(props.goToMenu)}>
        <span className="icon-button">{props.leftIcon}</span>
        {props.children}
        <span className="icon-right">{props.rightIcon}</span>
      </a>
    );
  }

  return (
    <div className="dropdown" style={{ height: menuHeight }} ref={dropdownRef}>

      <CSSTransition
        in={activeMenu === 'main'}
        timeout={500}
        classNames="menu-primary"
        unmountOnExit
        onEnter={calcHeight}>
        <div className="menu">
          <DropdownItem>My Profile</DropdownItem>
          <DropdownItem
            leftIcon={<CogIcon />}
            rightIcon={<ChevronIcon />}
            goToMenu="settings">
            Settings
          </DropdownItem>
          <DropdownItem
            leftIcon="There are a few things that need to be changed. Changed the import line for each svg to
import BellIcon from './icons/bell.svg';

Then, in the webpack, change to:

module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        },
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
        {
          test: /\.svg$/,
          use: [
            {
              loader: 'file-loader',
              options: {
              // name: 'images/[hash]-[name].[ext]',
              },
            },
          ],
        },
      ]
    }
  };

import./index.css'；
从“./icons/bell.svg”导入{ReactComponent as BellIcon}；
从“./icons/messenger.svg”导入{ReactComponent as messenger Icon}；
从“./icons/caret.svg”导入{ReactComponent as CaretIcon}；
从“./icons/plus.svg”导入{ReactComponent as PlusIcon}；
从“./icons/cog.svg”导入{ReactComponent as CogIcon}；
从“./icons/chevron.svg”导入{ReactComponent as ChevronIcon}；
从“./icons/arrow.svg”导入{ReactComponent as ArrowIcon}；
从“./icons/bolt.svg”导入{ReactComponent as BoltIcon}；
从“./DataFetching”导入数据获取；
从“React”导入React，{useState，useffect，useRef}；
从'react transition group'导入{CSTranslation}；
函数App（）{
返回(
);
}
功能导航栏（道具）{
返回(
{props.children}
);
}
功能导航项目（道具）{
const[open，setOpen]=useState（false）；
返回(

{open&&props.children}

);
}
函数下拉菜单（）{
const[activeMenu，setActiveMenu]=useState（'main'）；
const[menuHeight，setMenuHeight]=useState（null）；
const dropdownRef=useRef（null）；
useffect（（）=>{
设置菜单高度（dropdownRef.current？.firstChild.offsetHeight）
}, [])
函数calcHeight（el）{
常数高度=标高离视线；
设定高度（高度）；
}
功能下拉项（道具）{
返回(
);
}
返回(
我的个人资料
设置
有几件事需要更改。将每个svg的导入行更改为
从“/icons/bell.svg”导入BellIcon；

然后，在网页中，更改为：

在package.json中，需要添加
“引导图标”：“^1.4.1”，

最后，在.babelrc中添加一个插件：

“插件”：[“内联svg”]
尝试使用create react应用程序项目生成代码，但无法再现错误。错误可能与您的依赖项有关，它们是不同的。通过逐个删除应用程序渲染中的元素来查找问题，直到错误消失。@MichaelRovinsky感谢您的建议。我已将其缩小到我的NavItems，这仍然让我非常困惑，但现在错误已经缩小，我将创建一个新的帖子。