Meteor-React Error: Target Container is not a DOM element, after fix

Question

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.... ¡¡¡¡¡

I get the same... Meteor was just updated to 1.7 - I ran the tutorial 2 weeks ago when it was still 1.6. Then everything worked. Could they have broken something? https://www.meteor.com/tutorials/react/components — martin, Jun 10 '18 at 21:33
Won't it be better to use 'meteor create --react'? instead of going through the hassle of creating and then removing the default blaze-template and then add static-html? Nice comment but I believe the best way to go about such error is my removing the default blaze-html-template the follows the creation by simply using your command line(command prompt as the case may) to "meteor remove blaze-html-template" and then "meteor add static-html". I believe this approach will minimize the in the code better. — Mcbriandavids, Jan 04 '19 at 01:00
thanks for this thread, it was making me crazy. Sadly Scott doesn't update his courses, which is a shame as he is really smart and his content is A-class. — Christian Wolf Alves Hess, Oct 01 '19 at 18:17

Shraddha Goel · Answer 1 · 2018-07-06T11:36:01.520

48

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

edited Jul 06 '18 at 11:36

answered Jul 06 '18 at 11:04

Shraddha Goel

869
7
18

4

better answer because of the explanation – chip Aug 12 '18 at 15:26
Thanks @niccolom. – Shraddha Goel Aug 14 '18 at 12:00
1

It works, But if you face any problems after removing adding,, just re-start your app again. – Robin Oct 14 '18 at 17:13
1

If you plan to use Meteor's user account UI you should to use Method 1 (import './main.html') as the User account UI requires Blaze templates. This is true for the 'Todos App with React' tutorial. – Justin Fiedler Dec 06 '18 at 17:29

score 29 · Answer 2 · answered Aug 28 '17 at 07:17

29

If you removed blaze-html-templates you need to add static-html package to compile your index.html and avoid this error (see Meteor Guide, end of paragraph):

 meteor add static-html

answered Aug 28 '17 at 07:17

Xavier Priour

2,121
1
12
16

score 14 · Answer 3 · answered Jun 25 '18 at 10:12

14

I had the same problem. This is how I solved it.

In your terminal type the following lines in the project directory.

meteor remove blaze-html-templates
meteor add static-html

answered Jun 25 '18 at 10:12

Salamit

1,015
7
13

2

If you are using Steven Grider's Udemy course on Meteor, this is the answer. – Joe Jul 05 '18 at 19:16
1

This worked for me. i wonder why it is not in the official tutorial documentation – Kenshinman Aug 22 '18 at 00:01

score 8 · Answer 4 · answered Jun 16 '18 at 01:54

8

For me I just needed to import the .html file before I tried to render to the DOM.

import './main.html';

answered Jun 16 '18 at 01:54

JoshJoe

1,482
2
17
35

score 5 · Answer 5 · answered Jun 21 '18 at 03:51

5

meteor remove blaze-html-templates
meteor add static-html

answered Jun 21 '18 at 03:51

Ahmad Samawi

51
1
1

Add some description to your answer – Pankaj Makwana Jun 21 '18 at 05:33

score 1 · Answer 6 · answered Jun 12 '17 at 19:19

1

Add your script tag to before the closing </body> tag most likely the script loaded before your DOM ID.

also switch this around...

import React, { Component } from 'react';
import {Meteor} from 'meteor/meteor';
import { render } from 'react-dom';

class App extends Component {
  render(){
    return (
      <h1>Hello!</h1>
    );
  }
}

Meteor.startup(() => {
  render(<App />, document.getElementById('render-target'));
});

answered Jun 12 '17 at 19:19

Chris Hawkes

11,923
6
58
68

I had already tried this, with the same result, the same ERROR. Thank you – Juanma Font Jun 12 '17 at 19:38
1

Sorry, I dont understand what you say with: "Add your script tag" . It is necessary with Meteor ? – Juanma Font Jun 12 '17 at 19:40

Nimmi Verma · Answer 7 · 2018-09-21T10:24:00.577

1

First remove blaze template dependency

meteor remove blaze-html-templates

Then add static html

meteor add static-html

edited Sep 21 '18 at 10:24

answered Jun 22 '18 at 04:49

Nimmi Verma

465
6
11

please use formatting for better readability :) https://stackoverflow.com/help/formatting – chip Sep 15 '18 at 16:38

score 0 · Answer 8 · answered Jun 12 '17 at 21:04

0

I had removed the package (blaze-html-templates) .

I assumed that being a Meteor+React would not be necessary but it is used to compile the main.html.

Adding the package blaze-html-templates with

meteor add blaze-html-templates

solve the problem.

answered Jun 12 '17 at 21:04

Juanma Font

346
5
10

2

You don't need `blaze-html-templates`, but if you remove it you need to add `static-html` package: – Xavier Priour Aug 28 '17 at 07:15

score 0 · Answer 9 · answered Apr 30 '19 at 15:42

0

In my case the fix was simple. In HTML change class to id.

render( <h1>Hello</h1>, document.getElementById("app"))

<body>
<div class="app"><`enter code here`/div>
</body>

<body>
<div id="app"><`enter code here`/div>
</body>

answered Apr 30 '19 at 15:42

ispirett

648
10
10

score 0 · Answer 10 · edited May 24 '20 at 15:13

This is an old post but it's #1 in google results so...

I was getting this error on my android build but not web, already removed blaze and added statichtml..

My issue ended up being that I had a favicon and manifest.json being imported in my html but I hadn't gotten around to creating them yet.

I removed the links and it worked like a charm.

Hopefully this can save someone a few hours of digging.

Meteor-React Error: Target Container is not a DOM element, after fix

10 Answers10

Linked