title: ReactApp: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object
body: <p>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:</p>
  
  <blockquote>
    <p>Element type is invalid: expected a string (for built-in components)
    or a class/function (for composite components) but got: object.</p>
  </blockquote>
  
  <p>Error points to index.js to line:</p>
  
  <pre><code>ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>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?</p>
  
  <p>App.js</p>
  
  <pre><code>function createStore(reducer, initialState) {
    let state = initialState;
    // ...
  
    const getState = () =&gt; state;
  
    const dispatch = action =&gt; {
      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;
  </code></pre>
  
  <p>Index.js</p>
  
  <pre><code>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(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>First i get this warning message:</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>And then this error message follows:</p>
  
  <blockquote>
    <p>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 <strong>webpack_require</strong> (bootstrap 52ea5df7708886ffd661:678)
        at fn (bootstrap 52ea5df7708886ffd661:88)
        at Object.0 (flags.png:1)
        at <strong>webpack_require</strong> (bootstrap 52ea5df7708886ffd661:678)
        at bootstrap 52ea5df7708886ffd661:724
        at bootstrap 52ea5df7708886ffd661:724</p>
  </blockquote>
  
  <p>Here is screen of the whole error message (i cannot display it directly because of my low points amount):
  <img src="https://i.stack.imgur.com/MVm3r.png" alt="enter image description here"></p>