요소 유형이 잘못되었습니다. 문자열(내장 구성 요소) 또는 클래스/함수가 필요합니다.

요소 유형이 잘못되었습니다. 문자열(내장 구성 요소) 또는 클래스/함수가 필요합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import Map from './components/map/container/map';
import App from './App';
import './index.css';
import shell from './shared/utility/shell';
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware, ConnectedRouter } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'
import registerServiceWorker from './registerServiceWorker';
import { Routes } from './config';

const history = createHistory();
const target = document.querySelector('#root')
const initialState = {};
const enhancers = [];
const middleware = [
thunk,
routerMiddleware(history)
 ];

if (process.env.NODE_ENV === 'development') {
const devToolsExtension = window.devToolsExtension;

if (typeof devToolsExtension === 'function') {
enhancers.push(devToolsExtension());
 }
}
const composedEnhancers = compose(
applyMiddleware(...middleware),
  ...enhancers
);
const store = createStore(
 rootReducer,
 initialState,
 composedEnhancers
);
render(
  <Provider store={store}>
   <ConnectedRouter history={history}>
    <div>
     <Routes />
    </div>
   </ConnectedRouter>
  </Provider>,
  target
   )
 registerServiceWorker();
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();

---

저는 redux의 도움을 받아 에서 API를 호출하여 그 데이터를 테이블에 표시하려고 합니다.이 에러가 발생하고 있습니다.는 나의 ★★★★★★★★★★★★★★★★.index.js

---

1. 요소 유형이 잘못되었습니다. 문자열(내장 구성 요소의 경우) 또는 클래스/함수(복합 구성 요소의 경우)가 필요한데: 정의되지 않았습니다.정의된 파일에서 컴포넌트를 내보내는 것을 잊은 것 같습니다.

---

2. React.createElement: 유형이 잘못되었습니다. 문자열(내장 컴포넌트용) 또는 클래스/함수(복합 컴포넌트용)가 필요한데: 정의되지 않았습니다.정의된 파일에서 컴포넌트를 내보내는 것을 잊은 것 같습니다.

나는 많은 답을 찾아봤지만 오류를 인식할 수 없다.

수입하다Import하다 등의 때 .createHistory.

구성 요소가 다음과 같은 기본 내보내기를 사용하는 경우:

export default X

그런 다음 다음과 같이 간단히 가져올 수 있습니다.

import X from './X';

그러나 다음과 같은 이름 있는 내보내기를 사용하는 경우:

export const X=1;

그런 다음 다음과 같이 중괄호로 Import해야 합니다.

import {X} from './X';

그래서 당신의 수입품들을 보세요.이것으로 문제가 해결됩니다.

리액트 어플리케이션에서도 같은 문제가 발생했습니다.위에 기재한 수입 명세서입니다.변경:

import {x} from '/x.js'로로 합니다.import x from '/x.js'

그리고 그것은 일을 끝마쳤다.

네스트된 컴포넌트 중 하나가 존재하지 않는 컴포넌트를 렌더링하려고 했을 때도 이 오류가 발생했습니다.특히, 저는 이 기능을

<Button ... /> 

리액트 네이티브 컴포넌트는 리액트 내의 리액트 네이티브 컴포넌트입니다.

<button ... />

또한 진입점이 있는 곳에서도 발생할 수 있습니다.

제 경우 App.js가 index.js(개발자 콘솔이 오류를 식별하고 RenderDom 콜이 있었던 위치)를 호출하고 있었습니다.

그러나 App.js는 컴포넌트를 참조하고 있었고, 그 컴포넌트 내에서 에러(존재하지 않는 다른 컴포넌트에 대한 참조)가 발생했습니다.

저는 리액트 리덕스 사용을 잊어버렸을 때 이 문제에 직면했습니다.connect을 사용하다

그렇게,

변경:

 export default(mapStateToProps, mapDispatchToProps)(ContentTile);

수신인:

export default connect(mapStateToProps, mapDispatchToProps)(ContentTile);

문제를 해결했습니다.정말 바보같은 실수야

이 오류가 발생할 수 있는 이유는 여러 가지가 있습니다.

그것은 분명히 당신의 수입품 중 하나와 직접적인 관련이 있습니다.예를 들어 다음과 같습니다.

1. npm 패키지에서 모듈이 없거나 Import되지 않았습니다.
2. a 음 、 음음 。export수입하다
3. 이름/기본 내보내기/가져오기 혼재

다음과 같이 구성 요소 이름을 중괄호로 가져오지 않았는지 확인합니다.

import {SomeComponent} from '../path/to/SomeComponent'; // nope

나는 내가 그것을 했다는 것을 깨달았고, 그래서 나는 그것을 이것으로 바꿨고, 그것은 작동하기 시작했다.

import SomeComponent from '../path/to/SomeComponent'; // yes

는 그 말을 .{}등 하기 위한 입니다.또한 는 Import하지 Import를 합니다.수입하다export default누군가 댓글을 달아 확인해 줄 수도 있어요

이전 응답에 추가하려면 Import하려는 컴포넌트 내의 컴포넌트 중 하나가 비어 있거나 올바른 렌더 메서드가 없는 경우에도 이 오류가 발생합니다.

위에서 말한 바와 같이, 이 문제는 수입에 관한 것입니다.제 경우 CSTransition Group Import였습니다.npm 업데이트 후 패키지 'react-transition-group'에는 CSSTransition Group은 포함되지 않지만 CSTransition 및 Transition Group 등 다른 내보내기가 포함됩니다.그래서 그냥 줄을 바꿉니다.

import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'; 

와 함께

import TransitionGroup from 'react-transition-group/TransitionGroup'; 

에는 이렇게구성 요., 클래식 클래식 클래스 선언)으로 합니다.class App extends React.Componentfunction App())

어플리케이션에 루트를 추가하려고 할 때도 같은 문제가 발생했습니다.그 후 "react-router"에서 {BrowserRouter, Route}를 Import하고 있음을 알게 되었습니다.아래와 같이 react-router-dom에서 {BrowserRouter, Route}를 Import하는 것이 아니라 "react-router-dom"에서 {BrowserRouter, Route}을 Import합니다.온라인 커뮤니티 덕분에

컴포넌트를 내보내는 것을 확인합니다.이미 내보내는 경우 기본값을 놓쳤을 수 있습니다.

export default function App(){
 ...
}

특별한 경우지만 Recharts가 하나의 Responseive Container에 두 개의 차트를 넣으려고 했을 때 이 오류를 발생시켰습니다.그것은 지원되지 않습니다.

오류가 참조하는 컴포넌트의 서브컴포넌트가 함수/클래스를 내보내지 않은 경우에도 다음 오류가 발생할 수 있습니다.

따라서 이 문제는 참조된 컴포넌트가 아니라 Import 중인 컴포넌트(오류 텍스트에서는 참조되지 않음)에 있습니다.

이 버거를 찾는데 시간이 좀 걸렸어.

리액트 네이티브 요소에서 Input 컴포넌트를 Import해야 했던 내 경험처럼 잘못된 라이브러리에서 Import한 결과일 수 있습니다.

import { View, ActivityIndicator, Input } from 'react-native';
import { Input, Button } from 'react-native-elements';

제 경우 정의되지 않은 컴포넌트를 제거하여 문제를 해결했습니다.저는 그 부품을 잘못된 모듈에서 수입했습니다.

문제는 해결되었습니다. 문제는 이 시스템을 사용하는 대신

import { NavLink } from 'react-router-dom'

나는 사용했다

import { NavLink } from 'react-dom'

제가 말씀드리고 싶은 것은 코딩은 세세한 부분까지 신경을 쓰는 것입니다.

리액트 네이티브 엑스포 프로젝트에서 "FlatList"를 "FlatList"로 가져오기 때문에 이 오류가 발생하였습니다.한 시간 반을 들여서 깨달았습니다.

저는 문제가 있는 컴포넌트를 app.droute에 라우팅하려고 했습니다.따라서 index.droute는 app.droute의 적절한 Import 때문에 /를 렌더링하지 않습니다.

따라서 app.http의 컴포넌트가 정상적으로 동작하고 있는지 확인합니다.

언급URL : https://stackoverflow.com/questions/44897070/element-type-is-invalid-expected-a-string-for-built-in-components-or-a-class