React.createElement: type is invalid in simple empty app

Question

Still struggle to just simple run simple react application (just client to play around with).

Build is ok (you can see config here, previous question )

When I run server - there is an error on client side:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.

at invariant (transformed.js:304)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (transformed.js:11912)
at ReactCompositeComponentWrapper.performInitialMount (transformed.js:27510)
at ReactCompositeComponentWrapper.mountComponent (transformed.js:27401)
at Object.mountComponent (transformed.js:4158)
at mountComponentIntoNode (transformed.js:12676)
at ReactReconcileTransaction.perform (transformed.js:5756)
at batchedMountComponentIntoNode (transformed.js:12698)
at ReactDefaultBatchingStrategyTransaction.perform (transformed.js:5756)
at Object.batchedUpdates (transformed.js:29031)

Here is the code:

index.js

var React = require('react');
var ReactDOM = require('react-dom');
var App = require('./components/App.js');

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

index.html

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
        <div id='app'></div>
    </body>
</html>

App.js:

import React from 'react';
import ReactDOM from 'react-dom';
// import {render} from 'react-dom'; //didn't helped either

class App extends React.Component {
  render () {
    return (
      <div>
        <p> Hello React!</p>
      </div>
    );
  }
}

FYI:

Answer is correct, but also one thing. Don't forget to change all require on import, like here (in index.js):

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';

idmean · Accepted Answer · 2017-07-26 07:42:35Z

2

It’s telling you exactly what the problem is:

You likely forgot to export your component from the file it's defined in.

Change App.js similar to:

// ...
export default class App extends React.Component {
// ...

BTW, why are you using require in index.js and ES6 imports in App.js?

answered Jul 26, 2017 at 7:42

idmean

15k9 gold badges63 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

DanilGholtsman Over a year ago

wellp, I am really not used to write in ES6 style, force myself to do it

DanilGholtsman Over a year ago

but little bit different - just this

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

not any mention of that I forgot to export smth

DanilGholtsman Over a year ago

yep, I got in in my app folder

idmean Over a year ago

Then can you please try to import the App component with an import statement: import App from './components/App.js.

DanilGholtsman Over a year ago

whoa, that worked out. I changed all require to import! but how come?

|

Collectives™ on Stack Overflow

React.createElement: type is invalid in simple empty app

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related