您不能将JSX包含在js文件中，但您的图标是从“react-icons/md”导入的，您可以将它们用作JSX元素。
如果要在constants.js中使用这些图标，请尝试将其重命名为constants.jsx

Map循环中存在错误。
你不能在map循环中返回两个子元素。解决这个问题的一个方法是使用React Fragment来 Package 那些组件。
https://reactjs.org/docs/fragments.html

// Sidebar.jsx
import { categories } from "./constants.js";

export const Sidebar = () => (
  <div>
    {categories.map((category) => (
      <React.Fragment>
        <span>{category.icon}</span>
        <span>{category.name}</span>
      </React.Fragment>
    ))}
  </div>
);

另外，你必须警惕列表和循环中的关键属性。
https://reactjs.org/docs/lists-and-keys.html
第三件事，将Icon调用作为obj的值附加，然后将其作为react组件调用

// Sidebar.jsx
import { categories } from "./constants.js";

export const Sidebar = () => (
  <div>
    {categories.map((category) => {
      const IconComponent = category.icon;
      return (
        <> // another way to use fragment
          <span>
            <IconComponent />
          </span>
          <span>{category.name}</span>
        </>
      )}
    )}
  </div>
);

最后但并非最不重要的一点是，您的代码中存在语法错误。循环的最后一行缺少一个

//data categories.js
export const categories = [
  { name: "New", icon: "Home" },
  { name: "Coding", icon: "Code" },
  { name: "ReactJS", icon: "Code" },
];

//sidebar.js
import { categories } from "./constants.js";
import { MdHomeIcon, MdCodeIcon } from "react-icons/md";

export const Sidebar = () => (
  <div>
    {categories && categories.map((category, i) => (
      <div key = {i}>
      {category.icon === "Code"? <MdCodeIcon/> : <MdHomeIcon/>}
      <span>{category.name}</span>
      <div/>
    ))}
  </div>
);

可以根据需要编辑代码