React项目Element type invalid错误排查：是否为导入问题？

你遇到的错误Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined，核心原因是某个组件被解析成了undefined，结合你的代码，可能的问题如下：

1. 无效的Component导入语句 #

你代码里的import Component from 'react';是错误的，Component是React的命名导出，不是默认导出，这行不仅没用，还会覆盖变量，但你实际用的是React.Component，所以这不是触发错误的直接原因，但建议删掉这行。

2. 自定义组件的导入/导出不匹配 #

这是最可能的原因：

• 你导入Exercises时用了默认导入import Exercises from "./components/ExerciseDay";，但如果ExerciseDay.js里的组件是命名导出（比如export class ExerciseDay extends React.Component {...}），那么默认导入会得到undefined，导致渲染<Exercises/>时报错。
• 同理，MySurvey、ExerciseSelector也可能存在同样的导入/导出不匹配问题。

3. 第三方组件react-toggle-display的问题 #

如果react-toggle-display包没有正确安装，或者它的导出方式是命名导出，而你用了默认导入import ToggleDisplay from 'react-toggle-display';，也会导致ToggleDisplay为undefined，触发错误。

修正步骤 #

1. 立即删除无效的导入：import Component from 'react';
2. 检查自定义组件的导出方式：
   • 如果组件文件用的是默认导出（比如export default class ExerciseDay...），保持当前导入方式不变；
   • 如果是命名导出，修改导入语句为命名导入，比如：

     import { ExerciseDay as Exercises } from "./components/ExerciseDay";
     

     或者直接把组件文件改成默认导出。
3. 验证第三方组件：
   • 确认已经执行npm install react-toggle-display安装依赖；
   • 查看该组件的导出规则，如果是命名导出，修改导入为：

     import { ToggleDisplay } from 'react-toggle-display';
     

内容的提问来源于stack exchange，提问作者Orange Receptacle