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. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

at invariant (react-dom.development.js:185:15)
at createFiberFromTypeAndProps (react-dom.development.js:25148:11)
at createFiberFromElement (react-dom.development.js:25174:15)
at reconcileSingleElement (react-dom.development.js:15711:23)
at reconcileChildFibers (react-dom.development.js:15770:35)
at reconcileChildren (react-dom.development.js:19194:32)
at mountIndeterminateComponent (react-dom.development.js:21454:5)
at beginWork (react-dom.development.js:22658:16)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)

你提供的代码示例 #

App.js #

import React from 'react';
import SomeComponent from './SomeComponent';

function App() {
  return (
    <div className="App">
      <SomeComponent />
    </div>
  );
}

export default App;

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

排查步骤 #

• 重点检查App内部的子组件：错误提示指向App的render方法，说明问题大概率不在App本身的导出导入（你已经切换过这个方式），而是App里渲染的某个子组件。比如SomeComponent是否正确导出：如果它是默认导出，你用了命名导入就会拿到undefined；反过来同理。另外确认该组件文件里有没有写错导出语句（比如写成export;或者导出了一个未定义的变量）。

• 排查第三方组件导入：如果App里用了第三方UI组件，检查导入名称是否正确。比如某些组件库的导出方式有变化，或者你拼写错了组件名，导致导入结果是undefined。

• 确认没有错误赋值组件变量：检查App里有没有给组件变量重新赋值成undefined的情况，比如：

  let SomeComponent = require('./SomeComponent').default;
  SomeComponent = undefined; // 这类错误赋值会直接导致问题
  

• 验证测试法：临时把App的内容简化成只渲染基础元素：

  function App() {
    return <div>测试内容</div>;
  }
  

  如果错误消失，就逐个恢复子组件，找到触发错误的那个，再针对性排查它的导出导入。

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