Menu
I copy+paste the code from : https://stackoverflow.com/questions/41514549/
Then, I fix error and change 'class' by 'id' so:
main.html
<head>
<title>React Meteor Voting</title>
</head>
<body>
<div id="render-target"></div>
</body>
main.jsx
import React, { Component } from 'react';
import {Meteor} from 'meteor/meteor';
import { render } from 'react-dom';
Meteor.startup(() => {
render(<App />, document.getElementById('render-target'));
});
class App extends Component {
render(){
return (
<h1>Hello!</h1>
);
}
}
package.json
{
"name": "test-react",
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"babel-runtime": "^6.20.0",
"meteor-node-stubs": "~0.2.4",
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
}
But I got the same error:
Uncaught Error: _registerComponent(...): Target container is not a DOM element. at invariant (modules.js?hash=de726ed…:12672) at Object._renderNewRootComponent (modules.js?hash=de726ed…:30752) at Object._renderSubtreeIntoContainer (modules.js?hash=de726ed…:30842) at render (modules.js?hash=de726ed…:30863) at app.js?hash=71ef103…:46 at maybeReady (meteor.js?hash=27829e9…:809) at HTMLDocument.loadingCompleted (meteor.js?hash=27829e9…:821)
Is driving me crazy.... ¡¡¡¡¡
568
Basically, the problem occurs due to HTML rendering. When you create meteor app it comes up with the blaze by default & you are working on the meteor with react or meteor with angular. You solve this error by two methods.
Method 1 just add import statement in main.js
import './main.html';
Method 2 Preferrable as it is my choice
meteor remove blaze-html-templates
meteor add static-html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
