Error React createElement type is invalid expected a string for built-in components or a class function for composite components but got object

Question

I should be able to export my App component file and import it into my index.js.

I get the following error

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

My index.js

const React = require('react');
const ReactDOM = require('react-dom');
const App = require('./components/App');
require('./index.css');

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

Then in my components/App.js

const React = require('react');

export default class App extends React.Component {
    render() {
        return (
            <div>
                Hell World! Wasabi Sauce!
            </div>
        );
    }
}

// module.exports = App;

If I uncomment module.exports = App; it will work, but I'm trying to use the export syntax. In another project I am doing the exact same thing here and it's working fine

Answer 1

Hello @kartik,

I was facing same issue, i did this trick, worked for me,

You just need to put export before class App,

export class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

you can also check your router you are using, I have used this works for me,

npm install react-router-dom@next --save

Hope it work!!

If you need to know more about React, you can join React course for live instructer-led training.

Comments

Yeah it worked. But why do we need to do so ? I'd already exported using 'export default App'

---

Hello @ Kanishk,

Answer 2

The issue you have encountered was caused by mixing two different module systems which differ in the way they are resolved and implemented. CommonJS modules are dynamic and contrary to that ES6 modules are statically analyzable.

Tools like Babel transpile ES6 modules to CommonJS as of now because native support is not ready yet. But, there are subtle differences. By using default export (exports default) the transpiler emitted a CommonJS module with { default } property as there can be named and default export alongside in ES6 module. The following example is a perfectly valid ES6 module:

export default class Test1 { }
export class Test2 { }

This would result in { default, Test2 } CommonJS module after transpiling and by using require you get that object as a return value.

In order to import ES6 module's default export in CommonJS you must use require(module).default syntax by the reasons mentioned above.