"이 글에서 해결하는 문제는?"

"React에서 'Invariant Violation: Element type is invalid ... but got: object' 오류가 발생하는 원인과 해결 방법. 주로 default export/named export import 혼동과 React Router 컴포넌트 사용 오류에서 비롯됩니다."

"핵심 해결 방법은?"

"import 대상이 실제 컴포넌트(클래스/함수)인지 확인하고, default export라면 중괄호 없이 import하고 named export라면 중괄호로 import합니다. 즉 import { MyComponent }와 import MyComponent를 대상 파일의 실제 export 방식과 맞추면 해결됩니다."

React ‘Element type is invalid’ 오류 원인과 해결

검증 환경

본 절은 원문 사례·문서에 등장한 버전/도구를 정리한 것이다. 별도 실험실 재현이 명시되지 않은 항목은 일반화하지 않는다.

본문에 명시된 오류 메시지·프레임워크 버전을 기준으로 원인을 추적했다.
문서 정리일: 2026-08-27
OS/CI 세부 값은 프로젝트마다 다르므로, 적용 전 로컬에서 동일 오류 메시지를 재확인한다.

1. 문제 정의

React 애플리케이션을 실행할 때 다음 오류가 발생하며 화면이 렌더링되지 않습니다.

1
2
3
Uncaught Error: Invariant Violation: Element type is invalid:
expected a string (for built-in components) or a class/function (for composite components)
but got: object

StackOverflow 34130539(약 117만 뷰, 55개 답변)에서 반복적으로 보고되는 대표적인 React 오류입니다.

전형적인 문제 코드는 다음과 같습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var React  = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router');
var Route  = Router.Route;
var Link   = Router.Link;

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    );
  }
});

var About = require('./components/Home');
ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>
), document.body);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// ./components/Home.js
var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render: function() {
    return <RaisedButton label="Default" />;
  },
});

module.exports = Home;

이 오류는 시작점이 비슷해 보여도 원인이 여러 갈래로 나뉘며, 환경(Webpack, ES6 import, React Router 버전)에 따라 해결책이 달라집니다. 아래는 내 상황에 맞는 해결책을 선택할 수 있도록 분기 방식으로 정리한 것입니다.

2. 먼저 확인할 것

에러 메시지의 마지막 부분이 핵심 단서입니다.

1
2
... expected a string (for built-in components) or a class/function
   (for composite components) but got: object

React는 JSX 태그 <X/>를 만날 때 X가 string(HTML 내장 태그)이거나 class, function(컴포넌트)이기를 기대합니다. 그런데 **객체(object)**를 받았다는 것은, JSX 요소 위치에 넘어온 값이 실제 컴포넌트가 아니라 객체 그대로라는 뜻입니다.

즉, “좋은 컴포넌트를 만들었는데 React가 못 알아본다"기보다는, 우리가 JSX에 넘긴 심볼이 컴포넌트(클래스/함수)가 아니라 모듈 객체나 잘못된 감싸개 객체라는 점을 먼저 의심해야 합니다.

우선 점검 사항은 에러가 어느 컴포넌트를 가리키는지입니다. 에러 스택 트레이스에 나타난 파일명과 컴포넌트명을 확인하면, 다음 분기표에서 원인을 좁힐 수 있습니다.

3. 원인별 분기표 (Decision Tree)

아래 표는 이 오류의 가장 빈번한 원인 후보와 각 원인을 확정하는 방법을 정리한 것입니다. 표의 각 행을 위에서부터 순서대로 확인합니다.

원인 후보	확인 방법	해당할 때 나타나는 증상	해결 방향
default/named export import 혼동 (가장 흔함)	import 문과 대상 파일의 export 방식 비교	import는 되지만 JSX에서 그 값이 객체로 처리됨	import 표시(중괄호 유무)를 파일의 실제 export 방식과 맞춤
react-router 컴포넌트 용법 오용	`<Router>`, `<Route>`, `<Link>` 선언과 버전 확인	Router/Route/Link 또는 사용자 컴포넌트가 객체로 전달됨	React Router 사용 방식 정리 또는 버전에 맞는 import 문법 적용
`module.exports`가 컴포넌트가 아니라 객체	export된 심볼의 타입 직접 확인	JSX에 넘긴 값의 `typeof`가 `'object'`로 나옴	실제 컴포넌트(클래스/함수)가 export되도록 수정

각 원인에 대한 구체적인 해결 방법은 다음 섹션에서 다룹니다.

4. 상황별 해결책

갈래 ①: default vs named export — import 표시 바꾸기 (가장 흔한 원인)

이 오류의 최고 득표 답변은 “Webpack 기준으로 import { MyComponent } from '../components/xyz'와 import MyComponent from '../components/xyz'의 차이가 원인"이라고 안내합니다. 실제로 가장 빈번한 해결 경로는 import 표시(중괄호 유무)를 대상 파일의 export 방식과 일치시키는 것입니다.

import 방식과 대상 파일의 export 방식이 어긋나면, JSX에 넘어가는 것은 컴포넌트가 아니라 모듈 네임스페이스 객체가 됩니다. React는 그 객체를 요소 타입으로 해석하지 못해 위 오류를 냅니다.

대상 파일이 default export일 때 (예: `module.exports = Home` 또는 `export default Home`)

1
2
3
4
5
// 잘못된 예 — named export 문법으로 default export를 불러옴
import { Home } from '../components/Home';

// 올바른 예 — default export는 중괄호 없이 import
import Home from '../components/Home';

대상 파일이 named export(const)일 때

1
2
3
4
5
// 잘못된 예 — named export를 default 문법처럼 가져옴
import Home from '../components/Home';

// 올바른 예 — named export는 중괄호로 import
import { Home } from '../components/Home';

정리하면, 대상 파일의 export 방식과 import 문의 표시가 일치해야 JSX에 올바른 컴포넌트가 전달됩니다.

갈래 ②: react-router 컴포넌트 사용 정리

이 오류는 특히 구형 React Router(1.x)에서 Router, Route, Link를 사용할 때도 흔합니다. 이때 두 가지를 확인합니다.

현재 React Router 버전이 무엇인지 확인합니다. (구버전 1.x 문법과 최신 Router 버전의 사용법이 크게 다름)
<Router>, <Route>, <Link>가 실제로 올바른 컴포넌트로 import되어 JSX에 전달되는지 확인합니다.

문제 코드에서는 Router, Route, Link를 다음과 같이 꺼냅니다.

1
2
3
var Router = require('react-router');
var Route  = Router.Route;
var Link   = Router.Link;

만약 라이브러리가 해당 이름으로 컴포넌트를 export한다면 Router.Route처럼 점 표기로 접근해도 올바르지만, 버전이 다르거나 해당 심볼이 없으면 객체를 컴포넌트 자리에 넣는 실수가 생깁니다. 사용 중인 버전의 공식 문서 문법을 따라 import하는 것이 안전합니다.

갈래 ③: export한 값이 컴포넌트(클래스/함수)인지 확인

본문의 ./components/Home.js는 module.exports = Home으로 끝나는데, 이 Home은 React.createClass 결과 객체입니다. JSX 요소로 전달할 대상이 클래스나 함수여야 하는데 객체가 그대로 export되어 있으면, 해당 심볼을 JSX에서 요소로 쓰는 순간 위 오류가 납니다.

즉, export 전에 그 값이 실제로 React 컴포넌트(클래스/함수)인지를 확인해야 합니다. React 구버전에서 쓰던 createClass 기반 컴포넌트인지, 아니면 React 최신 클래스/함수 기반 컴포넌트인지에 따라 정리 방향이 달라집니다(환경에 따라 다를 수 있음).

5. 검증 명령

원인을 확인하고 수정한 뒤, 실제로 컴포넌트가 올바른 타입인지 검증하는 가장 확실한 방법은 JSX 전달 값이 객체가 아닌지 확인하는 것입니다.

import 대상의 타입 확인 (진단용)

오류 직전에 임시로 추가하여 확인할 수 있습니다.

1
2
console.log(typeof Home); // 정상 컴포넌트는 'function' or 'object'(React 클래스의 경우)
// 통상 컴포넌트는 'function'이 나와야 하며, 모듈 객체가 섞이면 위 오류가 납니다.

일관된 애플리케이션 테스트

수정 후 애플리케이션이 정상 렌더링되는지 다음 명령으로 확인합니다.

1
2
# npm 기반 프로젝트인 경우
npm test

또한 브라우저 콘솔에서 위 console.log(typeof ...) 출력이 함수/클래스로 나오는지, 개발자 도구에서 경고 없이 렌더링되는지를 함께 확인합니다. 특히 콘솔에 동일한 Invariant Violation이 재발하는지 확인하면 수정 여부를 확실히 알 수 있습니다.

검증 명령은 일반적인 React 점검 기준으로 안내한 것입니다. 실제 문법은 사용하는 React/Webpack/React Router 버전에 따라 다를 수 있으며, 정확한 활용은 해당 버전의 공식 문서를 따르시기 바랍니다.

6. 근본 원인 분석

표면 증상: React가 JSX 요소를 렌더링하다 got: object 오류로 중단됩니다.
근본 원인: JSX에 넘어온 심볼이 **컴포넌트(클래스/함수)가 아니라 ‘객체’**라는 점입니다. 이 객체는 default/named export import 표시가 일치 않아 생기는 모듈 네임스페이스 객체인 경우가 대부분입니다.
해결 핵심: import 방식을 대상 파일의 실제 export 방식과 일치시키면 React가 올바른 컴포넌트를 받게 됩니다.

내 코드의 import 문, 특히 import { ... }와 import ...의 방향을 대상 파일과 정확히 비교하면 대부분 즉시 해결됩니다.

7. 향후 예방 조치

import 표기를 export 방식과 일치 — 파일을 만들 때 default export, named export 중 하나만 쓰고 일관되게 유지하며, import 문에서는 반드시 같은 방식으로 가져옵니다.
typeof 검사 습관 — 컴포넌트를 새로 import할 때 typeof로 객체/클래스 여부를 빠르게 확인합니다.
React Router 버전 고정 — 프로젝트가 사용할 버전을 문서로 고정하고, 그 버전에 맞는 import 문법을 공식 문서에서 확인합니다.
에러 범위 최소화 — 에러가 나는 컴포넌트만 분리해서 해당 값이 클래스/함수인지 의심 범위를 좁힙니다(일반적인 점검 방식).

DevTrace 결론

이 오류의 핵심은 React가 JSX 요소로 ‘객체’를 받았기 때문이며, 대부분 import 코드의 default/named export 표기가 대상 파일의 실제 export 방식과 어긋난 데서 발생합니다.

원문 출처는 문제 발견의 단서이며, 위 판단과 점검 항목은 DevTrace의 독자 분석이다.

DevTrace verdict: 이 문제의 핵심은 적용 컴포넌트 자체가 아니라, 만든 컴포넌트(클래스/함수)를 가져올 때 import 문법이 대상 파일의 export 방식과 어긋나 모듈 객체가 요소로 전달된 것입니다. 가장 빠른 해결은 import 표시 하나를 바로잡는 일입니다.

출처

원본 질문: StackOverflow 34130539 — Uncaught Error: Invariant Violation: Element type is invalid
최고 득표 답변(Webpack 기준): import { MyComponent }와 import MyComponent의 표시 차이로 해결된다는 안내
본문의 검증 명령과 예방 체크는 일반적인 React 점검 기준이며, 환경(React/Webpack/React Router 버전)에 따라 세부가 달라질 수 있습니다.

React ‘Element type is invalid’ 오류 원인과 해결#

검증 환경#

1. 문제 정의#

2. 먼저 확인할 것#

3. 원인별 분기표 (Decision Tree)#

4. 상황별 해결책#

갈래 ①: default vs named export — import 표시 바꾸기 (가장 흔한 원인)#

대상 파일이 default export일 때 (예: module.exports = Home 또는 export default Home)#

대상 파일이 named export(const)일 때#

갈래 ②: react-router 컴포넌트 사용 정리#

갈래 ③: export한 값이 컴포넌트(클래스/함수)인지 확인#

5. 검증 명령#

import 대상의 타입 확인 (진단용)#

일관된 애플리케이션 테스트#

6. 근본 원인 분석#

7. 향후 예방 조치#

DevTrace 결론#

출처#