Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс/функция

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();

Я пытаюсь вызвать API с помощью сокращения и отобразить его данные в таблице. Я получаю эту ошибку. Выше мой файл index.js.

1. Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получила: undefined. Вероятно, вы забыли экспортировать свой компонент из файла, который он определил.

2. React.createElement: тип недопустим - ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получила: undefined. Вероятно, вы забыли экспортировать свой компонент из файла, который он определил.

Я упомянул многие ответы, которые я не могу распознать.

Ответ 1

Проблема заключается в операторах импорта. Вы не использовали фигурные скобки, импортируя некоторые компоненты, такие как createHistory.

Если компонент использует экспорт по умолчанию, например:

export default X

Затем вы можете просто импортировать его, как:

import X from './X';

Но если вы используете именованный экспорт, например:

export const X=1;

Затем вам нужно импортировать его в фигурные скобки, например:

import {X} from './X';

Поэтому взгляните на свой импорт. Это решит вашу проблему.

Ответ 2

Я столкнулся с той же проблемой в своем заявлении о реакции. Это определенно ваши заявления о ввозе, как указано выше. Я изменился
import {x} from '/x.js'
в
import x from '/x.js'
и это сделало работу

Ответ 3

Я также столкнулся с этой ошибкой, когда один из вложенных компонентов попытался отобразить компонент, которого не было. В частности, я попытался использовать

<Button ... />

реакционно-зависимый компонент в реактиве, где я должен был использовать

<button ... />

Ответ 4

Что касается меня, я столкнулся с этой проблемой, когда я забыл использовать response-redux connect в моем экспорте.

Так,

изменение:

 export default(mapStateToProps, mapDispatchToProps)(ContentTile);

To:

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

решил проблему. Действительно глупая ошибка

Ответ 5

Это также может быть вызвано тем, где находится точка входа.

В моем случае App.js вызывал index.js (где консоль разработчика идентифицировала ошибку и где мой вызов RenderDom был).

Однако App.js ссылался на компонент, и именно в этом компоненте у меня была ошибка (ссылка на еще один компонент, которого не было).

Ответ 6

Как было сказано выше, этот вопрос связан с импортом. В моем случае это был импорт CSSTransitionGroup. После обновления npm пакет "реакция-переход-группа" больше не содержит CSSTransitionGroup, но он содержит различные экспортные операции, такие как CSSTransition и TransitionGroup. Поэтому я просто заменю строку:

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

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

Ответ 7

В моем случае это было решено путем изменения компонентов: они были записаны в объявлениях функций, и я изменял их классическими объявлениями классов (class App extends React.Component вместо function App())