1

I'm doing this tutorial on Meteor1.4 with React and i'm getting this error:

Uncaught Error: _registerComponent(...): Target container is not a DOM element.(…)

I have looked at this similar answer, but this being Meteor i can't tell why it's happening.

main.html

<head>
  <title>React Meteor Voting</title>
</head>
<body>
  <div class="render-target"></div>
</body>

main.js

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": "MeteorReact1.4",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "babel-runtime": "6.18.0",
    "meteor-node-stubs": "~0.2.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  }
}
Community
  • 1
  • 1
Cristian Muscalu
  • 9,007
  • 12
  • 44
  • 76

1 Answers1

3

In your Meteor startup's render method you are getting the element by id wherein in your html file, no such element exists. Replace class with id in the div in your html file's body

Swapnil
  • 2,573
  • 19
  • 30
  • Awww you are so right. I created the div using emmet `.render-target` and then i could not see my stupid mistake. Thank you! – Cristian Muscalu Jan 07 '17 at 10:26
  • Hello Swapnil, I am using the same code, the same example and also using ID, not class. But in my case, it is showing a blank page. I checked the source code from the browser and the head code is reflected there but not the body part. Any suggestion will be appreciate. Thanks – Bhavesh Jul 26 '18 at 18:29
  • or use `querySelector()` instead and then you don't have to worry about by Id or Class. – Daniel Dec 05 '18 at 05:14