잡히지 않는 오류 : 변하지 않는 위반 : 요소 유형이 잘못되었습니다 : 문자열 (내장 구성 요소의 경우) 또는 클래스 / 함수가 필요하지만 다음을 얻습니다.

이 오류가 발생합니다.

잡히지 않는 오류 : 변하지 않는 위반 : 요소 유형이 잘못되었습니다 : 문자열 (내장 구성 요소의 경우) 또는 클래스 / 함수 (복합 구성 요소의 경우)이지만 개체가 있습니다.

이것은 내 코드입니다.

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="Default" />
    );
  },
});

module.exports = Home;

필자의 경우 ( Webpack 사용 )는 다음과 같은 차이점이었습니다.

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

vs

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

두 번째는 첫 번째 오류가 발생하는 동안 작동합니다. 또는 그 반대입니다.

내보내기 기본값 또는 require (path)가 필요합니다.

var About = require('./components/Home').default

React 컴포넌트를 모듈화 한 적이 있습니까? 그렇다면 module.exports 를 지정하지 않은 경우이 오류가 발생합니다 . 예를 들면 다음과 같습니다.

모듈화되지 않은 이전에 유효한 구성 요소 / 코드 :

var YourReactComponent = React.createClass({
    render: function() { ...

module.exports를 사용한 모듈화 된 컴포넌트 / 코드 :

module.exports = React.createClass({
    render: function() { ...

이 오류가 발생하면 다음을 사용하여 링크를 가져 오기 때문일 수 있습니다.

import { Link } from 'react-router'

대신 사용하는 것이 좋습니다

' react-router-dom ' 에서 {링크} 가져 오기
                      ^ -------------- ^

이것이 반응 라우터 버전 4의 요구 사항이라고 생각합니다.

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router 또한의 속성 중 하나입니다 react-router. 따라서 모듈을 변경하려면 다음과 같은 코드가 필요합니다.

  var reactRouter = require('react-router')
  var Router = reactRouter.Router
  var Route = reactRouter.Route
  var Link = reactRouter.Link

ES6 구문 링크 use ( import)를 사용하려면 babel 을 도우미로 사용하십시오.

BTW, 코드 작동을 위해 다음 과 같이 추가 할 수 있습니다 {this.props.children}.App

render() {
  return (
    <div>
      <h1>App</h1>
      <ul>
        <li><Link to="/about">About</Link></li>
      </ul>
      {this.props.children}
    </div>

  )
}

단일 질문에 대한 답변 목록에 놀라지 마십시오. 이 문제에는 여러 가지 원인이 있습니다.

제 경우에는 경고가

warning.js : 33 경고 : React.createElement : 유형이 유효하지 않습니다. 문자열 (내장 구성 요소의 경우) 또는 클래스 / 함수 (복합 구성 요소의 경우)가 필요하지만 정의되지 않았습니다. 정의 된 파일에서 컴포넌트를 내보내는 것을 잊었을 수 있습니다. index.js : 13에서 코드를 확인하십시오.

오류가 뒤 따른다

invariant.js : 42 잡히지 않는 오류 : 요소 유형이 잘못되었습니다 : 문자열 (내장 구성 요소의 경우) 또는 클래스 / 함수 (복합 구성 요소의 경우)가 필요하지만 정의되지 않았습니다. 정의 된 파일에서 구성 요소를 내보내는 것을 잊었을 수 있습니다.

메서드 또는 파일 이름이 언급되지 않았기 때문에 오류를 이해할 수 없습니다. 위에서 언급 한이 경고를보고 나서야 해결할 수있었습니다.

index.js에 다음 줄이 있습니다.

<ConnectedRouter history={history}>

키워드 "ConnectedRouter"로 위의 오류를봤을 때 GitHub 페이지에서 해결책을 찾았습니다.

오류는 react-router-redux패키지 를 설치할 때 기본적으로이 패키지 를 설치하기 때문 입니다. https://github.com/reactjs/react-router-redux 이지만 실제 라이브러리는 아닙니다.

이 오류를 해결하려면 npm 범위를 지정하여 적절한 패키지를 설치하십시오. @

npm install react-router-redux@next

잘못 설치된 패키지를 제거 할 필요는 없습니다. 자동으로 덮어 씁니다.

감사합니다.

추신 : 심지어 경고 도움이됩니다. 방치하지 마십시오 경고 상기 찾고 단지 오류 혼자.

필자의 경우 내 보낸 자식 모듈 중 하나가 올바른 반응 구성 요소를 반환하지 않았습니다.

const Component = <div> Content </div>;

대신에

const Component = () => <div>Content</div>;

표시된 오류는 부모에 대한 것이므로 파악할 수 없습니다.

제 경우에는 잘못된 주석 기호로 인해 발생했습니다. 이것은 틀렸다 :

<Tag>
    /*{ oldComponent }*/
    { newComponent }
</Tag>

이것은 맞습니다 :

<Tag>
    {/*{ oldComponent }*/}
    { newComponent }
</Tag>

중괄호를 주목하십시오

나는 같은 오류가 있습니다 : ERROR FIX !!!!

내가 사용하는 '- 라우터 REDUX 반응' V4를하지만 그녀의 나쁜 .. NPM 설치 후 반응-라우터 REDUX @ 옆에 내가에있어 "반응 - 라우터 REDUX" "^ 5.0.0-alpha.9을"

그리고 그것은 작동합니다

나는 수행하여이있어 import App from './app/';수입에 기대 ./app/index.js하지만, 대신 수입 ./app.json.

나는 같은 문제 가 있었고 JSX 마크 업에 정의되지 않은 반응 구성 요소를 제공하고 있음을 깨달았습니다 . 문제는 렌더링 할 반응 구성 요소가 동적으로 계산되어 결국 정의되지 않은 것입니다!

오류는 언급했다 :

불변 위반 : 요소 유형이 잘못되었습니다 : 문자열 (내장 구성 요소의 경우) 또는 클래스 / 함수 (복합 구성 요소의 경우)가 예상되지만 정의되지 않았습니다. 정의 된 파일에서 구성 요소를 내보내는 것을 잊었을 수 있습니다.의 렌더링 방법을 확인하십시오 C.

이 오류를 생성하는 예제 :

var componentA = require('./components/A');
var componentB = require('./components/B');

const templates = {
  a_type: componentA,
  b_type: componentB
}

class C extends React.Component {
  constructor(props) {
    super(props);
  }
  
  // ...
  
  render() {
    //Let´s say that depending on the uiType coming in a data field you end up rendering a component A or B (as part of C)
    const ComponentTemplate = templates[this.props.data.uiType];
    return <ComponentTemplate></ComponentTemplate>
  }
  
  // ...
}

문제는 유효하지 않은 "uiType"이 제공되어 결과적으로 정의되지 않은 결과를 낳는 것입니다.

templates['InvalidString']

이것에 대한 빠른 추가와 마찬가지로. 나는 같은 문제가 있었고 Webpack이 내 테스트를 컴파일하는 동안 응용 프로그램이 정상적으로 실행되었습니다. 구성 요소를 테스트 파일로 가져올 때 가져 오기 중 하나에서 잘못된 대소 문자를 사용하여 동일한 오류가 발생했습니다.

import myComponent from '../../src/components/myComponent'

그랬어 야 했어

import myComponent from '../../src/components/MyComponent'

가져 오기 이름 myComponent은 MyComponent파일 내부의 내보내기 이름에 따라 다릅니다 .

React Native 최신 버전 0.50 이상에서 비슷한 문제가 발생했습니다.

나에게 그것은 차이점이었다.

import App from './app'

과

import App from './app/index.js'

(후자는 문제를 해결했습니다). 뉘앙스를 알아 채기 위해이 이상한 잡기 힘든 시간을 보냈습니다 :(

나를 위해 일한 또 다른 가능한 해결책 :

현재 react-router-redux베타 버전이며 npm은 4.x를 반환하지만 5.x는 반환하지 않습니다. 그러나 @types/react-router-redux반환 된 5.x. 따라서 정의되지 않은 변수가 사용되었습니다.

NPM / Yarn이 5.x를 사용하도록 강요하면 해결되었습니다.

귀하의 오류가 주어지면 :

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

두 가지 옵션이 있습니다.

1. 내보내기 파일 default에 export default class ____.... 다음 과 같은 단어가있을 수 있습니다. 그러면 가져 오기 에서 파일을 사용하지 {}않아야합니다. 에서와 같이import ____ from ____

2. 기본 단어를 사용하지 마십시오. 그런 다음 내보내기는 다음과 같습니다. export class ____... 그러면 가져 오기에서를 사용해야합니다 {}. 처럼import {____} from ____

필자의 경우 라이브러리로 인해 가져 오기가 암시 적으로 발생했습니다.

변경하여 문제를 해결했습니다.

export class Foo

에

export default class Foo.

루트 이름이 동일한 동일한 디렉토리에 .jsx 및 .scss 파일이있을 때이 오류가 발생했습니다.

그래서 만약 당신이, 예를 들어, Component.jsx와 Component.scss같은 폴더에 당신은이 작업을 수행하려고 :

import Component from ./Component

Webpack은 분명히 혼란스럽고 적어도 내 경우에는 .jsx 파일을 원할 때 scss 파일을 가져 오려고 시도합니다.

.scss 파일의 이름을 바꾸고 모호성을 피함으로써 문제를 해결할 수있었습니다. Component.jsx를 명시 적으로 가져올 수도 있습니다.

그리고 내 경우에는 하위 모듈 중 하나의 가져 오기 감소에서 세미콜론이 누락되었습니다.

이것을 변경하여 수정했습니다.

import Splash from './Splash'

이에:

import Splash from './Splash';

내 경우에는 기본 내보내기를 사용하고 있지만 a function또는을 내 보내지 않고 요소 React.Component만 내보내십시오.JSX

오류:

export default (<div>Hello World!</div>)

작품 :

export default () => (<div>Hello World!</div>)

언급 된 것 외에도 import/ export이슈. 내가 사용하여 찾을 React.cloneElement()추가하는 props자식 요소에 다음이 저에게이 같은 오류를 준 렌더링.

나는 바꿔야했다.

render() {
  const ChildWithProps = React.cloneElement(
    this.props.children,
    { className: `${PREFIX}-anchor` }
  );

  return (
    <div>
      <ChildWithProps />
      ...
    </div>
  );
}

에:

render() {
  ...
  return (
    <div>
      <ChildWithProps.type {...ChildWithProps.props} />
    </div>
  );
}

자세한 내용은 React.cloneElement() 문서 를 참조하십시오.

반응 라우팅 에서이 오류가 발생했습니다. 문제는 사용 중이었습니다.

<Route path="/" component={<Home/>} exact />

하지만 잘못된 경로는 구성 요소를 클래스 / 함수로 요구하므로

<Route path="/" component={Home} exact />

그리고 효과가있었습니다. (구성 요소 주위의 괄호를 피하십시오)

나를 위해 내 스타일 구성 요소 는 기능적 구성 요소 정의 후에 정의되었습니다. 그것은 스테이징에서만 일어나고 나에게는 로컬이 아닙니다. 스타일 구성 요소를 구성 요소 정의 위로 이동하면 오류가 사라졌습니다.

가져온 구성 요소 중 일부가 잘못 선언되었거나 존재하지 않음을 의미합니다.

비슷한 문제가 있었어요

import { Image } from './Shared'

하지만 공유 파일을 살펴볼 때 'Image'구성 요소가 아닌 'ItemImage'구성 요소가 없었습니다.

import { ItemImage } from './Shared';

이것은 다른 프로젝트에서 코드를 복사 할 때 발생합니다.)

React.Fragment내 반응 버전이이므로 문제가 발생하여 < 16.2제거했습니다.

@Balasubramani M이 나를 여기에서 구했습니다. 사람들을 돕기 위해 하나 더 추가하고 싶었습니다. 이것은 너무 많은 것들을 함께 붙이고 버전에 무심한 경우 문제입니다. material-ui 버전을 업데이트했으며 변경해야합니다

import Card, {CardContent, CardMedia, CardActions } from "@material-ui/core/Card"; 

이에:

import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';

나는 같은 문제가 있었고 문제는 일부 js 파일이 특정 페이지 번들에 포함되지 않았다는 것입니다. 해당 파일을 포함 시키면 문제가 해결 될 수 있습니다. 나는 이걸했다:

.Include("~/js/" + jsFolder + "/yourjsfile")

그리고 그것은 나를 위해 문제를 해결했습니다.

Dot NEt MVC에서 React를 사용하는 동안이었습니다.

이 오류의 또 다른 이유를 발견했습니다. 이것은 JS-in-JS가 React 컴포넌트에서 리턴 함수의 최상위 JSX에 널값을 리턴하는 것과 관련이 있습니다.

예를 들면 다음과 같습니다.

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return null;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

이 경고가 나타납니다.

경고 : React.createElement : type is invalid-문자열 (내장 구성 요소의 경우) 또는 클래스 / 함수 (복합 구성 요소의 경우)가 필요하지만 null이 있습니다.

이 오류는 다음과 같습니다.

잡히지 않는 오류 : 요소 유형이 유효하지 않습니다. 문자열 (내장 구성 요소의 경우) 또는 클래스 / 함수 (복합 구성 요소의 경우)이지만 null이 있습니다.

렌더링하려는 CSS-in-JS 구성 요소가있는 CSS가 없기 때문에 발견되었습니다. CSS가 반환되고 null 값이 아닌지 확인하여 문제를 해결했습니다.

예를 들면 다음과 같습니다.

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return Css;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

거의 같은 오류가 발생합니다.

캐치되지 않음 (약속) 오류 : 요소 유형이 유효하지 않습니다. 문자열 (내장 구성 요소의 경우) 또는 클래스 / 함수 (복합 구성 요소의 경우)이지만 오브젝트가 있습니다.

팀에서 개발 한 다른 노드 라이브러리에서 순수 기능 구성 요소를 가져 오려고했습니다. 이 문제를 해결하려면, 나는 (구성 요소 내부의 경로를 참조하는 절대 수입으로 변경했다 node_modules)에서

'team-ui'에서 FooBarList 가져 오기;

에

'team-ui / lib / components / foo-bar-list / FooBarList'에서 FooBarList 가져 오기;

필자의 경우 외부 구성 요소를 다음과 같이 가져 왔습니다.

import React, { Component } from 'react';

다음과 같이 선언했습니다.

export default class MyOuterComponent extends Component {

내부 컴포넌트가 React 베어를 가져온 경우 :

import React from 'react';

선언을 위해 점선으로 표시했습니다.

export default class MyInnerComponent extends ReactComponent {

필자의 경우 검색하고 확인하는 데 많은 시간이 걸렸지 만 다음과 같은 방법으로 만 수정되었습니다. 사용자 정의 구성 요소를 가져올 때 "{", "}"제거 :

import OrderDetail from './orderDetail';

내 잘못은 :

import { OrderDetail } from './orderDetail';

orderDetail.js 파일에서 OrderDetail을 기본 클래스로 내보냈습니다.

class OrderDetail extends Component {
  render() {
    return (
      <View>
        <Text>Here is an sample of Order Detail view</Text>
      </View>
    );
  }
}

export default OrderDetail;