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

Question

Expected

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

Results

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. What is driving me nuts is in another project I am doing the exact same thing here and it's working fine :(

Answer 1

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 for 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. Following example is 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.

---

Debugging React.createElement: type is invalid errors

This error is very common when React tries to render a component when there is an issue with the imported module. Most of the time this is caused by missing export in the module or issues with the path (relative paths are some kind of a joke) and without proper tooling, this may lead to serious hair pulling.

In this case, React couldn't render generic object {__esModule: true, default: function} and just threw an error. When using require there is a possibility to just print out required module to see it's contents which may help to debug the issue.

---

As a side note, please don't mix CommonJS modules with ES6 modules unless you really need. import/export syntax is reserved for the ES6 modules. When using CommonJS modules, just use module.exports and use require to import them. In the future, most developers will be using standard module format. Until then, be careful when mixing them together.

Answer 2

Very often..

...it is as simple as:

const MyModule = require('./MyModule');

vs

const {MyModule} = require('./MyModule');

Answer 3

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

Answer 4

Just in case someone else runs into this also...
I was facing this same issue, but only when running my jest testing code. I got the same aforementioned error:

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

If your project happens to be using typescript but you're using jest testing (which uses a mix of module systems internally - including CommonJS require syntax), you can still get this error testing with jest if you use the

import React from 'react';

syntax in a sub-component instead of the typescript variant:

import * as React from 'react';

It's a weird error & can be hard to catch, since the app may run fine with either import approach, but the jest testing of a primary component may fail until the sub-component is updated to use the second react syntax (again, for those using typescript with jest testing).

Answer 5

ES6 modules are confusing. If we mix them with NodeJS commonJS module pattern, it will be more confusing ;) ,

I'd recommend use one single style, preferrably ES6 modules if you are working in Frontend code. I wrote one sample app to understand it better.

https://github.com/Sutikshan/es-bits/tree/master/modules