검출되지 않은 오류:불변 위반:요소 유형이 잘못되었습니다. 문자열(내장 구성 요소에 대한) 또는 클래스/함수가 필요하지만: 개체를 받았습니다.
다음 오류가 발생하였습니다.
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.
코드는 다음과 같습니다.
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';
대
import MyComponent from '../components/xyz.js';
두 번째 것은 동작하지만 첫 번째 것은 에러의 원인이 됩니다.아니면 그 반대일 수도 있죠.
export default 또는 require(path).default가 필요합니다.
var About = require('./components/Home').default
React 컴포넌트를 모듈화한 지 얼마 되지 않았습니까?yes의 경우 module.exports를 지정하지 않은 경우 다음과 같은 오류가 발생합니다.
이전에 유효한 컴포넌트/코드(비인증되지 않았습니다.
var YourReactComponent = React.createClass({
render: function() { ...
모듈화된 컴포넌트/코드(module.code):
module.exports = React.createClass({
render: function() { ...
제 경우 내보낸 자모듈 중 하나가 올바른 반응 컴포넌트를 반환하지 않았습니다.
const Component = <div> Content </div>;
대신
const Component = () => <div>Content</div>;
표시된 오류는 부모에 대한 것이므로 알 수 없습니다.
이 에러가 발생하는 경우는, 다음의 방법으로 링크를 Import 하고 있는 것이 원인일 가능성이 있습니다.
import { Link } from 'react-router'
그 대신에, 사용하는 것이 좋을지도 모릅니다.
'react-router-dom'에서 { Link } 가져오기^--------------^
이것은 리액트 라우터 버전4의 요건이라고 생각합니다.
단 하나의 질문에 대한 답변 목록에 놀라지 마십시오.이 문제의 원인은 다양합니다.
제 경우 경고는
warning.js:33 경고: React.createElement: 유형이 잘못되었습니다. 문자열(내장 컴포넌트용) 또는 클래스/함수(복합 컴포넌트용)가 필요한데 정의되지 않았습니다.정의된 파일에서 컴포넌트를 내보내는 것을 잊은 것 같습니다.index.js:13에서 코드를 확인합니다.
이어서 에러가 발생하다
notifonent.js:42 Uncaughted Error: 요소 유형이 잘못되었습니다. 문자열(내장 컴포넌트용) 또는 클래스/함수(복합 컴포넌트용)가 필요한데 정의되지 않았습니다.정의된 파일에서 컴포넌트를 내보내는 것을 잊은 것 같습니다.
방법이나 파일명이 기재되어 있지 않기 때문에 이해할 수 없었습니다.저는 위의 경고를 보고서야 해결할 수 있었습니다.
index.js에 다음 행이 있습니다.
<ConnectedRouter history={history}>
위의 오류에 대해 "Connected Router" 키워드로 구글을 검색해 보니 GitHub 페이지에서 해결 방법이 검색되었습니다.
「」를 인스톨 에, 「」를 인스톨 하면,react-router-redux기본적으로는 이 패키지를 설치합니다.https://github.com/reactjs/react-router-redux. 그러나 실제 라이브러리는 아닙니다.
하려면 , 스코프에 「npm」을해 적절한 .@
npm install react-router-redux@next
잘못 설치된 패키지를 제거할 필요가 없습니다.자동으로 덮어씁니다.
감사해요.
PS: 경고도 도움이 됩니다.오류만 보고 경고하는 것을 게을리하지 마세요.
https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4httpsgithub.com/rackt/react-router/blob//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 구 if((((((((((((((((((((((((((((((((( if if 。importbabel을 도우미로 사용합니다.
, 는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★{this.props.children} App를 들면, 예를 들면.
render() {
return (
<div>
<h1>App</h1>
<ul>
<li><Link to="/about">About</Link></li>
</ul>
{this.props.children}
</div>
)
}
에러가 있는 경우:
'Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object'
넌 두가지 옵션이 있다 :
- 에는 '이렇게 하다'라는 할 수 .
default나 지금이나
export default class someNameHere
'가져오다'는 '가져오다'는 해야 .{}의 경우와
import somethingHere from someWhereHere
- 기본 단어를 사용하지 마십시오.그러면 내보내기는
export class someNameHere
가져오기는 가져오기를 .{}를 들면
import {somethingHere} from someWhereHere
내 경우, 그것은 잘못된 댓글 기호로 인해 일어났다.이것은 틀렸습니다.
<Tag>
/*{ oldComponent }*/
{ newComponent }
</Tag>
정답입니다.
<Tag>
{/*{ oldComponent }*/}
{ newComponent }
</Tag>
괄호 안에 주의해 주세요.
같은 에러가 발생.ERROR FIX!!
'react-router-redux' v4를 사용하지만, 그녀는 좋지 않습니다.npm 설치 후 react-router-redux@next가 되면 "react-router-redux"가 됩니다.^5.0.0-alpha.9인치,
그리고 IT의 역할
저도 같은 문제가 있었는데 JSX 마크업에서 Undefined React 컴포넌트를 제공하고 있다는 것을 깨달았습니다.렌더링할 반응 컴포넌트가 동적으로 계산되어 정의되지 않았습니다.
에러는 다음과 같습니다.
) 가 되지 않았습니다.요소 유형이 잘못되었습니다. 문자열(내장 구성 요소) 또는 클래스/함수(복합 구성 요소)가 필요한데: 정의되지 않았습니다.정의된 파일에서 컴포넌트를 내보내는 것을 잊은 것 같습니다.해 보세요.
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']가 이걸 해서 얻은 거예요.import App from './app/';를 ./app/index.js '수입하다../app.json.
여기에 간단히 추가하겠습니다.웹 팩이 테스트를 컴파일하고 어플리케이션이 정상적으로 동작하고 있는 동안에도 같은 문제가 있었습니다.테스트 파일로 컴포넌트를 Import할 때 Import 중 하나에 잘못된 케이스를 사용하고 있었기 때문에 같은 오류가 발생하였습니다.
import myComponent from '../../src/components/myComponent'
그랬어야 했는데
import myComponent from '../../src/components/MyComponent'
의 Import에 .myComponent내부 내보내기 이름에 따라 달라집니다.MyComponentfilename을 클릭합니다.
React Native 최신 버전 0.50 이상에서도 같은 문제가 발생.
저에게는 다음과 같은 차이가 있었습니다.
import App from './app'
그리고.
import App from './app/index.js'
(후자는 문제를 해결했습니다).이 이상한 뉘앙스를 알아채는 데 몇 시간이 걸렸어요.
또 하나의 가능한 해결책은 나에게 효과가 있었다.
★★★★★★★★★★★★★★★,react-router-redux4.는 반환하지 않습니다.단, 4.x는 5.x로 반환됩니다.@types/react-router-redux되었습니다.5 . x 환 。이치노
NPM/Yarn에게 5.x를 사용하도록 강요하여 해결했습니다.
제 경우 도서관으로 인해 암묵적으로 수입이 이루어졌습니다.
바꿔서 겨우 고쳤다.
export class Foo
로.
export default class Foo.
같은 디렉토리에 루트명이 같은 .jsx 및 .scss 파일이 있을 때 이 오류가 발생했습니다.
예를 '있다'가 요.Component.jsx ★★★★★★★★★★★★★★★★★」Component.scss같은 폴더에 있는 경우는, 다음의 조작을 실시합니다.
import Component from ./Component
Webpack은 혼란스러운 것 같습니다.적어도 제 경우는 .jsx 파일을 정말 원할 때 scs 파일을 Import하려고 합니다.
.scss 파일의 이름을 변경하여 애매함을 피할 수 있었습니다.Component.jsx를 명시적으로 Import할 수도 있습니다.
내보내기를 .function ""React.Component단, , ,,JSX, 즉, 요소, 즉.
오류:
export default (<div>Hello World!</div>)
동작:
export default () => (<div>Hello World!</div>)
리액트 라우팅에서 이 오류가 발생했습니다.문제는 이 에러를 사용하고 있다는 것입니다.
<Route path="/" component={<Home/>} exact />
클래스/함수로 컴포넌트를 필요로 하는 루트가 잘못되었기 때문에 로 변경했습니다.
<Route path="/" component={Home} exact />
그리고 그것은 성공하였다.(컴포넌트 주변의 브레이스만 피하십시오.)
제 경우 서브모듈 중 하나에서 Import-Declaration 시 세미콜론이 누락되어 있었습니다.
다음을 변경하여 수정:
import Splash from './Splash'
다음과 같이 입력합니다.
import Splash from './Splash';
★★★★★★★★★★★★★★★★ 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() 자세한 내용은 문서를 참조하십시오.
이 에러도 발생하고 있습니다.이러한 컴포넌트를 내보내는 중 오류가 발생했습니다.
export default Component();
이런 거 말고...
export default Component;
컴포넌트 끝에 (')를 붙임으로써 단순히 참조하는 것이 아니라 실제로 함수를 호출한 것으로 알고 있습니다.
위의 답변에는 기재되어 있지 않지만, 기재되어 있지 않은 경우가 있습니다.누군가에게 도움이 되고 시간을 절약했으면 좋겠어요.이 오류의 원인을 정확히 파악하는 데 오랜 시간이 걸렸습니다!
이 문제는 기본 내보내기에 사용되는 에일리어스일 수도 있습니다.
바꾸다
import { Button as ButtonTest } from "../theme/components/Button";
로.
import { default as ButtonTest } from "../theme/components/Button";
문제를 해결해 주셨어요.
저도 같은 문제였습니다.왜냐하면 잘못된 라이브러리를 Import했기 때문에 라이브러리에서 문서를 확인했더니 새로운 버전으로 경로가 변경되어 해결 방법이 다음과 같습니다.
import {Ionicons} from '@expo/vector-icons';
내가 잘못 썼어
import {Ionicons} from 'expo';
이 질문에 사례를 추가하고 싶습니다.예를 들어, 이전에 여러 Import를 혼합하여 Import 순서를 교환함으로써 이 문제를 해결했습니다.
import { Label } from 'components/forms/label';
import Loader from 'components/loader/loader';
...
import Select from 'components/select/select'; // <----- the error happen
변경 후:
import Select from 'components/select/select'; // <----- Fixed
import { Label } from 'components/forms/label';
import Loader from 'components/loader/loader';
...
기능 컴포넌트 정의 후에 스타일 컴포넌트가 정의되었습니다.그것은 단지 무대 위에서 일어났을 뿐, 나에게 있어서는 국지적으로 일어나지 않았다.스타일 컴포넌트를 컴포넌트 정의 이상으로 이동하자 오류가 사라졌습니다.
Import된 컴포넌트 중 일부가 잘못 선언되었거나 존재하지 않음을 의미합니다.
나도 비슷한 문제가 있었어
import { Image } from './Shared'
하지만 공유 파일을 살펴보니 'ItemImage' 컴포넌트가 아니라 'ItemImage' 컴포넌트가 없었습니다.
import { ItemImage } from './Shared';
이것은 다른 프로젝트에서 코드를 복사할 때 발생합니다.
에 문제가 있었습니다.React.Fragment왜냐하면 제 리액션 버전은< 16.2그래서 그걸 없앴어요.
저도 이 이슈를 받고 있었어요.내 Import는 정상입니다. 복사한 내용을 복사하여 사용 중인 위치에 붙여넣을 수 있습니다.그러나 문제가 있는 것은 컴포넌트에 대한 참조입니다.
나는 엑스포를 폐쇄하고 다시 시작해야 했다.
오류? 이것은 분명히 Import 또는 내보내기 문제입니다.정의 스크립트에서 내보내지 않은 컴포넌트 또는 컨테이너로 참조하거나 Import할 때 잘못된 형식을 사용했습니다.
해결책?
- 모든 컴포넌트/컨피규레이션 정의를 검토하고 스크립트 끝(예: "export default 'yourcomponent name") 또는 컴포넌트 정의 시작(예: export const 'yourcomponent name'=() => { ........)에서 내보냈는지 확인합니다.}
- Import 스테이트먼트에서는, 대응하는 export 스테이트먼트에 근거해, 이름 있는 Import와 디폴트의 Import를 혼재하고 있지 않은 것을 확인합니다.
언급URL : https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string
'programing' 카테고리의 다른 글
| Python에서 클래스 변수를 정의하는 올바른 방법 (0) | 2022.10.30 |
|---|---|
| python의 반복기에서 has_next가 있습니까? (0) | 2022.10.30 |
| phpMyAdmin 3.2.4를 사용하여 뷰를 편집하려면 어떻게 해야 합니까? (0) | 2022.10.30 |
| 디버깅 로그 인쇄 방법 (0) | 2022.10.30 |
| 여러 Python 버전과 PIP를 다루고 있습니까? (0) | 2022.10.30 |