Element type is invalid: expected a string (for built-in components) or a class/function

user_8248204 0
Viewed 137778
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.

redux reactjs
18 Answers

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

user_83621860

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 ... />
user_27794610

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).

user_47975070

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

user_90091960

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';
user_2209590

In my case I solved it changing the components: They were written in functions declarations and I change them by classical Class declarations (class App extends React.Component instead of function App() )

user_107082600

I also had the similar problem while attempting to add routes into my application. I then realised that i was importing { BrowserRouter, Route } from "react-router"; instead of correctly importing it from react-router-dom as below import { BrowserRouter, Route } from "react-router-dom". Thanks to the online community

user_119071570

Make sure you export the component. And if you are already exporting, then you might have missed the default.

export default function App(){
 ...
}
user_127462910

It's a special case, but Recharts threw this error for me when I attempted to put two charts inside one ResponsiveContainer. That is not supported.

user_7330920

You may also get this error if a sub-component of the component that the error references has not exported its function/class:

So the problem isn't in the referenced component but in a component that it is importing (which is not referenced in the error text).

Took me a while to find this bugger.

user_9141210

Sometimes, It could be as a result of importing from the wrong library, like in my experience, where I should have imported Input component from react native elements.

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

In my case I resolved the problem by removing undefined component. I imported that component from wrong module.

user_145816610

There are several reasons why this error might occur.

It is definitely related directly to an issue with one of your imports. This could be:

  1. A missing/miss-imported module from a npm package.
  2. A component missing the export or an altogether empty component attempting to be imported.
  3. mixed up named/default export/import
user_161185350

My problem is solved, the problem was instead of using

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

I used

import { NavLink } from 'react-dom'

I want to say this, coding includes paying attention to details.

user_135191060

I got this error just because import "FlatList" as "Flatlist" in react native expo project. And I spend one and a half hour to realize that :(

user_124001930

Check you aren't importing your component name in braces like this:

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

I realised I had done that and so I changed it to this and it started working:

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

I believe the {} are for selecting from imports with multiple exports like the React components etc, and without you get what the export default is, but maybe someone can comment to confirm that.

user_37320750

for me i was trying to route in app.js some component that have problem, so index.js will not render the / because of that in-proper import in app.js

so alwasy make sure components in app.js are working properly

user_107629470
Related