Invariant Violation: 오류 발생: 요소 유형이 유효하지 않음 - 문자열(내장 구성요소) 또는 클래스/함수를 기대했지만 객체를 받았습니다.

이런 오류가 발생하고 있습니다:

Uncaught Error: Invariant Violation: 요소 유형이 유효하지 않음: 내장 구성요소의 경우 문자열 (내장 구성 요소), 또는 클래스/함수 (구성 요소)를 예상했지만 객체를 받았습니다.

이것이 내 코드입니다:

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)

나의 Home.jsx 파일:

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');
var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label=기본값 />
    );
  },
});
module.exports = Home;

답변 1

내 경우에 (Webpack를 사용한 경우) 이것은 다음 사이의 차이였습니다:

import {MyComponent} from '../components/xyz.js';

대비하여

import MyComponent from '../components/xyz.js';

두 번째 것은 잘 작동하지만 첫 번째는 오류를 일으킵니다. 또는 그 반대일 수도 있습니다.

답변 2

제목: 에러 해결을 위한 React 소개 및 팁
서론:
React는 현재 웹 개발에서 매우 인기 있는 프론트엔드 라이브러리입니다. 많은 개발자들이 React를 사용하여 사용자 인터페이스를 구축하고, 앱을 만들고, 웹 개발 프로젝트를 관리합니다. 그러나 때로는 React를 사용하는 동안 에러 메시지와 같은 문제가 발생할 수 있습니다. 이번 글에서는 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object라는 에러 메시지에 대해 알아보고, 이를 해결하기 위한 방법과 팁을 제시하겠습니다.
주요 내용:
1. 에러 원인 분석하기:
- React에서 발생하는 에러는 다양한 원인으로 인해 발생할 수 있으며, 대부분 해결 가능합니다.
- Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object 에러 메시지는 주로 컴포넌트의 잘못된 타입 사용으로 발생합니다.
- 컴포넌트의 잘못된 타입 사용은 일반적으로 개발자가 잘못된 import 문 또는 오타를 입력한 것이 원인입니다.
2. 해결 방법:
- 에러 메시지에서 언급된 부분은 컴포넌트의 타입이 잘못되었다는 것을 나타냅니다.
- 컴포넌트 타입이 잘못되었다면, 컴포넌트를 import하는 부분을 다시 확인해야 합니다.
- 제대로 된 컴포넌트 경로를 import하도록 수정하거나, 오타가 있는지 확인하는 등의 작업을 수행해야 합니다.
- 또한, 컴포넌트의 이름을 정확히 맞추어야 하며, 대소문자 구분을 철저히 지켜야 합니다.
3. 예방을 위한 팁:
- 일관된 네이밍 규칙을 사용하세요. 컴포넌트 이름은 항상 대문자로 시작해야 합니다.
- 파일 및 경로 구조를 체계적으로 관리하세요. 프로젝트가 복잡해지면 파일 위치를 찾기 어려워질 수 있습니다.
- 주석을 추가하여 코드를 이해하기 쉽도록 만드세요. 다른 개발자나 당신 자신이 코드를 더 쉽게 파악할 수 있게 됩니다.
- 해당 에러 메시지와 관련하여 React 공식 문서를 살펴보는 것도 도움이 될 수 있습니다.
결론:
React로 작업하는 동안 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object 에러 메시지가 발생할 수 있습니다. 이러한 에러를 해결하기 위해서는 에러 메시지에 나타난 컴포넌트의 타입이나 import 문을 확인해야 합니다. 또한, 예방을 위해 일관된 네이밍 규칙을 사용하고, 체계적인 파일 및 경로 구조를 유지하며, 주석을 추가하여 코드를 더 이해하기 쉽도록 만들어야 합니다. React 공식 문서를 참조하면 더 많은 도움을 받을 수 있습니다.