Uncaught Error: Target container is not a DOM element. (React webpage won't show anything)

问题

I have been following the tutorial provided by Meteor but was unable to run the provided code properly. There is nothing displayed on the page after I start the application. What could be the problem?

I'm using Meteor platform version 1.7. I have installed React dependencies using a command:

meteor npm install --save react react-dom

I'm also getting error in the browser console:

Uncaught Error: Target container is not a DOM element.
    at invariant (modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:3462)
    at legacyRenderSubtreeIntoContainer (modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:22109)
    at render (modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:22190)
    at Meteor.startup (main.js:8)
    at maybeReady (meteor.js?hash=0504f43f667698535416b00eb44eb6f53161cb63:927)
    at HTMLDocument.loadingCompleted (meteor.js?hash=0504f43f667698535416b00eb44eb6f53161cb63:939)

package.json:

{
  "name": "test",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --once --driver-package meteortesting:mocha",
    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
    "visualize": "meteor --production --extra-packages bundle-visualizer"
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0",
    "meteor-node-stubs": "^0.4.1",
    "react": "^16.6.0",
    "react-dom": "^16.6.0"
  },
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    "testModule": "tests/main.js"
  }
}

My file structure:

main.html:

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

<body>
    <h1>Hello!</h1>
    <div id="render-target"></div>
</body>

main.js:

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'));
});

main.css:

body {
    padding: 10px;
    font-family: sans-serif;
}

App.js:

import React, { Component } from 'react';

import Task from './Task.js';

// App component - represents the whole app
export default class App extends Component {
  getTasks() {
    return [
      { _id: 1, text: 'This is task 1' },
      { _id: 2, text: 'This is task 2' },
      { _id: 3, text: 'This is task 3' },
    ];
  }

  renderTasks() {
    return this.getTasks().map((task) => (
      <Task key={task._id} task={task} />
    ));
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>

        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

Task.js:

import React, { Component } from 'react';

// Task component - represents a single todo item
export default class Task extends Component {
  render() {
    return (
      <li>{this.props.task.text}</li>
    );
  }
}

The error is:

Uncaught Error: Target container is not a DOM element.

回答1:

Update main.js file as like below

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

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

import './main.html'

I have imported main.html & it should work.

Also without above, you can remove blaze-template as like

meteor remove blaze-html-templates

and add static as like below

meteor add static-html

回答2:

If you included your package.json then it would be easier to figure out what your problem is. Moreover, you should check out create-react-app to quickly bootstrap a react application with minimum fuss. The docs are pretty straightforward and very easy to setup. Hope this was helpful.

回答3:

The problem has been resolved! I had to remove blaze-html-templates and add static-html

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

来源：https://stackoverflow.com/questions/53071080/uncaught-error-target-container-is-not-a-dom-element-react-webpage-wont-show

标签

javascript

reactjs

meteor

web-applications