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

user_168738 0
Viewed 70239

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 :(

commonjs reactjs ecmascript-6 export javascript
6 Answers

Very often..

...it is as simple as:

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

vs

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

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
user_64403720

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).

user_33950690

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

user_3892370

For me this was an issue with circular dependencies.

//simplistic example

//a.js
import { foo } from './b.js'
export const bar = foo

//b.js
import { bar } from './a.js'
export const foo = bar
user_25560340
Related