javascript - invariant violation error when using ReactDOM.render -
i following relay-101 starting relay. when run below code got invariant violation error.
webpack.config.js:
var path = require('path'); module.exports = { entry: path.resolve(__dirname, 'index.js'), module: { loaders: [ { test: /\.js$/, loader: 'babel', query: {stage: 0} } ] }, output: {filename: 'index.bundle.js', path: './'} }; index.js
let react = require('react'); let reactdom = require('react-dom'); class item extends react.component{ render(){ let item = this.props.store.item; return ( <div> <h1><a href={items.url}>{item.title}</a></h1> <h2>{item.score} - {item.by.id}</h2> <hr /> </div> ); } }; let mountnode = document.getelementbyid('contain'); let item = { id : '1337', url : 'http://google.com', title : 'google', score : 100, : {id : 'clay'} }; let store = {item}; let rootcomponent = <item store={store} />; reactdom.render(rootcomponent, mountnode); index.html
<html> <head> </head> <body> <div id='contain'> </div> <script src="/index.bundle.js" charset="utf-8" ></script> </body> </html> when run above got error this:
uncaught error: invariant violation: _registercomponent(...): target container not dom element.
what did wrong?
i suspect have not specified html file entrypoint in webpack config. webpack synthesizing 1 on fly load index.js, , definitely, file won't contain <div id="contain"></div>.
you can learn how use webpack html plugin write own custom templates, easiest thing generate mountpoint @ runtime.
const react = require('react'); const reactdom = require('react-dom'); class item extends react.component { render(){ let item = this.props.store.item; return ( <div> <h1><a href={items.url}>{item.title}</a></h1> <h2>{item.score} - {item.by.id}</h2> <hr /> </div> ); } }; // create mount point , attach dom const mountnode = document.createelement('div'); document.body.appendchild(mountnode); const item = { id: '1337', url: 'http://google.com', title: 'google', score: 100, by: {id: 'clay'}, }; reactdom.render( <item store={{item}} />, mountnode );
Comments
Post a Comment