Check the render method of `App`. Error: Element type is invalid: expected a string (for built-in components) or a class/function but got: undefined

Issue

Does anyone know why I'm getting this error even after playing around with the imports statements? Full error message:

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, or you might have mixed up default and named imports.

Check the render method of App. Error: 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, or you might have mixed up default and named imports.

Check the render method of App. at createFiberFromTypeAndProps (http://localhost:8787/static/js/bundle.js:30611:21) at createFiberFromElement (http://localhost:8787/static/js/bundle.js:30632:19) at createChild (http://localhost:8787/static/js/bundle.js:19201:32) at reconcileChildrenArray (http://localhost:8787/static/js/bundle.js:19441:29) at reconcileChildFibers (http://localhost:8787/static/js/bundle.js:19783:20) at reconcileChildren (http://localhost:8787/static/js/bundle.js:22715:32) at updateHostComponent (http://localhost:8787/static/js/bundle.js:23359:7) at beginWork (http://localhost:8787/static/js/bundle.js:24804:18) at HTMLUnknownElement.callCallback (http://localhost:8787/static/js/bundle.js:9790:18) at Object.invokeGuardedCallbackDev (http://localhost:8787/static/js/bundle.js:9834:20)

My App.js:

import './App.css';
import React from 'react';
import OrganizationChart from './OrganizationChart';
import {OrgChart} from 'react-orgchart'; 
import 'react-orgchart/index.css';

function App() {
    const initechOrg = {
        name: "Bill Lumbergh",
        actor: "Gary Cole",
        children: [
          {
            name: "Peter Gibbons",
            actor: "Ron Livingston",
            children: [
              {
                name: "And More!!",
                actor: "This is just to show how to build a complex tree with multiple levels of children. Enjoy!"
              }
            ]
          },
          {
            name: "Milton Waddams",
            actor: "Stephen Root"
          },
          {
            name: "Bob Slydell",
            actor: "John C. McGi..."
          },
        ]
    };
    return (
        <div className="App">
            <header className="App-header">
                <h1>The Organization Chart</h1>
                <OrgChart tree={initechOrg} OrganizationChart={OrganizationChart} />
            </header>
        </div>
    );
}

export default App ;

and my index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

And as aforementioned, I've tried both export default App ; ... import App from './App'; and export {app} and import {App} from './App'; in App.js and Index.js respectively, and I'm still getting the same exact as error...

Solution

it's:

import OrgChart from 'react-orgchart';

not:

import {OrgChart} from 'react-orgchart'; 

checkout the docs

Answered By - Alan Omar