React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 해결 방법

 

 

이번 글에서는 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.  에러 해결 방법에 대하여 알아보겠습니다.

 

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

 

 

[에러가 발생한 코드]

import React from 'react';
import Route from 'react-router-dom';
import ReactRouter1 from './ReactRouter1';

function App() {
  return (
    <div className="App">
        <Route exact path="/" element={ReactRouter1()}/>
    </div>
  )
}

export default App;

 

 

[에러 원인]

위의 코드에서 react-router-dom을 임포트 할 때 react-router-dom의 default export로 Route를 가져왔습니다. 하지만, react-router-dom 패키지 안에서 Route는 하나의 기능으로 { Route }로 export를 가져와야 합니다. 즉, import path가 잘못됐다고 생각해서 발생된 에러라고 생각됩니다.

 

 

[해결 방법]

import되는 파일의 path, 이름을 잘 확인해 주셔야 합니다. path, 이름이 잘 맞는데 이러한 에러가 발생하면 함수가 잘 만들어져 있는지 확인해 주시면 됩니다.

import React from 'react';
import { Route } from 'react-router-dom';
import ReactRouter1 from './ReactRouter1';

function App() {
  return (
    <div className="App">
        <Route exact path="/" element={ReactRouter1()}/>
    </div>
  )
}

export default App;

 

 

 

Reference

[React] React.Component와 Component의 차이