Element type is invalid: expected a string (for bu

Question

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

---

I am trying to call an API from with the help of redux and display its data in a table. I am getting this error. Above is my index.js file.

---

1. Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

---

2. React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

I have referred to many answers I am not able to recognize the error.

Answer 1

For me, I faced this issue when I forget to use react-redux's connect in my export.

So,

changing:

 export default(mapStateToProps, mapDispatchToProps)(ContentTile);

To:

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

solved the issue. Really silly mistake

Answer 2

It can also be caused from where the entry point is.

In my case, the App.js was calling index.js (where the developer console was identifying the error, and where my RenderDom call was).

However, App.js was referencing a component, and it was within that component that I had the error (a reference to yet another component that did not exist).

Answer 3

I've also run into this error when one of the nested components attempted to render a component that did not exist. Specifically, I attempted to use

<Button ... /> 

a react-native component in React, where I should have been using

<button ... />

Answer 4

Problem is in the import statements. You have not used curly braces while importing some components like createHistory.

If a component uses a default export like:

export default X

Then you can simply import it like:

import X from './X';

But if you are using a named export like:

export const X=1;

Then you need to import it in curly braces like:

import {X} from './X';

So have a look at your imports. This will resolve your issue.

Answer 5

As was sayed above, this issue with import. In my case it's was a CSSTransitionGroup import. After npm update the package 'react-transition-group' no longer contains CSSTransitionGroup, but it's contains different exports, like CSSTransition and TransitionGroup. So i just replace line:

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

with

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

Answer 6

I ran into the same problem in my react application. It's definitely your import statements as stated above. I changed
import {x} from '/x.js'
to
import x from '/x.js'
and that got the job done