ReactApp: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

Question

I have very simple application, but it throws me an error and i have no idea what to do. In index.js i add App.js to DOM, everything is rendered ok and several second later it throws this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Error points to index.js to line:

ReactDOM.render(<App />, document.getElementById("root"));

In my opinion App is exported properly. I have read other answered question with this topic but none has helped me to understand what is going on in my very small app. Please, does anyone have idea what is the problem?

App.js

function createStore(reducer, initialState) {
  let state = initialState;
  // ...

  const getState = () => state;

  const dispatch = action => {
    state = reducer(state, action);
  };

  return {
    getState,
    dispatch
  };
}

function reducer(state, action) {
  if (action.type === "ADD_MESSAGE") {
    return {
      messages: state.messages.concat(action.message)
    };
  } else {
    return state;
  }
}

const initialState = { messages: [] };

const store = createStore(reducer, initialState);

const addMessageAction1 = {
  type: "ADD_MESSAGE",
  message: "How does it look, Neil?"
};

store.dispatch(addMessageAction1);
const stateV1 = store.getState();

const addMessageAction2 = {
  type: "ADD_MESSAGE",
  message: "Looking good."
};

store.dispatch(addMessageAction2);
const stateV2 = store.getState();

console.log("State v1:");
console.log(stateV1);
console.log("State v2:");
console.log(stateV2);

const App = { createStore, reducer, initialState }; // for tests
export default App;

Index.js

import React from "react";
import ReactDOM from "react-dom";
// some comment
// some comment
// some comment
// some comment
import App from "./App";

import "./index.css";

import "./semantic-dist/semantic.min.css";

ReactDOM.render(<App />, document.getElementById("root"));

First i get this warning message:

index.js:2178 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check your code at index.js:13.

And then this error message follows:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. at invariant (invariant.js:42) at throwOnInvalidElementType (react-dom.development.js:5390) at createFiberFromElement (react-dom.development.js:5356) at reconcileSingleElement (react-dom.development.js:7972) at reconcileChildFibers (react-dom.development.js:8028) at reconcileChildrenAtExpirationTime (react-dom.development.js:8166) at reconcileChildren (react-dom.development.js:8149) at updateHostRoot (react-dom.development.js:8393) at beginWork (react-dom.development.js:8898) at performUnitOfWork (react-dom.development.js:11708) at workLoop (react-dom.development.js:11731) at HTMLUnknownElement.callCallback (react-dom.development.js:104) at Object.invokeGuardedCallbackDev (react-dom.development.js:142) at invokeGuardedCallback (react-dom.development.js:191) at replayUnitOfWork (react-dom.development.js:11218) at renderRoot (react-dom.development.js:11773) at performWorkOnRoot (react-dom.development.js:12318) at performWork (react-dom.development.js:12239) at performSyncWork (react-dom.development.js:12216) at requestWork (react-dom.development.js:12116) at scheduleWorkImpl (react-dom.development.js:11991) at scheduleWork (react-dom.development.js:11951) at scheduleRootUpdate (react-dom.development.js:12579) at updateContainerAtExpirationTime (react-dom.development.js:12607) at Object.updateContainer (react-dom.development.js:12626) at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:15926) at react-dom.development.js:16345 at Object.unbatchedUpdates (react-dom.development.js:12426) at legacyRenderSubtreeIntoContainer (react-dom.development.js:16341) at Object.render (react-dom.development.js:16409) at Object../src/index.js (index.js:13) at webpack_require (bootstrap 52ea5df7708886ffd661:678) at fn (bootstrap 52ea5df7708886ffd661:88) at Object.0 (flags.png:1) at webpack_require (bootstrap 52ea5df7708886ffd661:678) at bootstrap 52ea5df7708886ffd661:724 at bootstrap 52ea5df7708886ffd661:724

Here is screen of the whole error message (i cannot display it directly because of my low points amount):

Answer 1

An uncommon scenario which gives this error is if you are importing a third-party react component that was built using webpack and the libraryTarget was set to commonjs2. Setting the libraryTarget to umd fixed it for me. The third-party library was my own in this case so I was able to change its libraryTarget. For more details see this

Answer 2

I got the same Problem but my solution was a bit different. Seems like some variable types got mixed up wrong. To prevent this (if possible), switch to strict-Mode.

ReactDOM.render(
  <React.StrictMode>
 
    <App />
  
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 3

The main problem I can tell you, I do not see any React Component to be rendered in your script. React does not expect us to export object like this to be rendered with ReactDOM.render() :

const App = { createStore, reducer, initialState }; // for tests
export default App;

The things which should go as export default and get rendered is whether a Class component ( I suggest this type of component as Root App ) which looks something like:

import React from 'react';

class App extends React.Component {
    render(<div>JSX script here</div>);
}
export default App;

or function component which something looks like this:

import React from 'react';

const App = () => {
    return (<div>JSX script here</div>);
}
export default App

It does not make sense to do render on an object as root of a React App. Instead, it expects a React Component to be rendered as root of React App.

You can export another thing ( function, variables, and objects ) as a named export along with default export. Maybe something that looks like this:

import React from 'react';

class App extends React.Component {
    render(<div>JSX script here</div>);
}
export default App;

const aFunction = ()=> {};
const anObject = {"key":"value"};
export { aFunction, anObject }

I suggest you learn more about React Component, ES6 named export & default export.