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

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

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 2

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