Meteor + React - Error: Target container is not a DOM element

Question

I'm getting this error when following meteor-react tutorial: https://www.meteor.com/tutorials/react/creating-an-app

My app is in Meteor v1.7.0.1.

My client/main.js file looks like this:

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

import App from './imports/ui/App.js';


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

And my client/main.html is this:

<head>
  <title>Todo List</title>
</head>

<body>
  <div id="render-target"></div>
</body>

Can anyone help me to solve this issue. Thanks!

https://stackoverflow.com/questions/44507161/meteor-react-error-target-container-is-not-a-dom-element-after-fix your question has already been answered here, it's kind of duplicated. — Thai Duong Tran, Jun 12 '18 at 00:03
Possible duplicate of [Meteor-React Error: Target Container is not a DOM element, after fix](https://stackoverflow.com/questions/44507161/meteor-react-error-target-container-is-not-a-dom-element-after-fix) — MasterAM, Jun 12 '18 at 15:15

score 0 · Answer 1 · answered Dec 05 '18 at 05:27

Where is your ReactDOM import? You need react-dom to work in the browser. Install it in your terminal like so:

npm install --save react-dom

Then I would refactor like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './main.html';

Also, where is your component? Create one like so:

const App = () => {
  return <div>React App #2</div>;
};

And then render it like so:

Meteor.startup(() => {
  ReactDOM.render(<App />, document.querySelector('.container'));
});

Meteor + React - Error: Target container is not a DOM element

1 Answers1