javascript - React.createElement: type is invalid in simple empty app -
still struggle simple run simple react application (just client play around with).
build ok (you can see config here, previous question )
when run server - there error on client side:
uncaught error: element type invalid: expected string (for built-in components) or class/function (for composite components) got: object. forgot export component file it's defined in.
at invariant (transformed.js:304) @ reactcompositecomponentwrapper.instantiatereactcomponent [as _instantiatereactcomponent] (transformed.js:11912) @ reactcompositecomponentwrapper.performinitialmount (transformed.js:27510) @ reactcompositecomponentwrapper.mountcomponent (transformed.js:27401) @ object.mountcomponent (transformed.js:4158) @ mountcomponentintonode (transformed.js:12676) @ reactreconciletransaction.perform (transformed.js:5756) @ batchedmountcomponentintonode (transformed.js:12698) @ reactdefaultbatchingstrategytransaction.perform (transformed.js:5756) @ object.batchedupdates (transformed.js:29031)
here 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 'react'; import reactdom 'react-dom'; // import {render} 'react-dom'; //didn't helped either class app extends react.component { render () { return ( <div> <p> hello react!</p> </div> ); } } fyi:
answer correct, 1 thing. don't forget change require on import, here (in index.js):
import react 'react'; import reactdom 'react-dom'; import app './components/app.js';
it’s telling problem is:
you forgot export component file it's defined in.
change app.js similar to:
// ... export default class app extends react.component { // ... btw, why using require in index.js , es6 imports in app.js?
Comments
Post a Comment