J'ai suivi le tutoriel fourni par Météore mais n'a pas pu exécuter correctement le code fourni. Rien ne s'affiche sur la page après le démarrage de l'application. Quel est le problème ?
J'utilise la plateforme Meteor version 1.7. J'ai installé les dépendances de React à l'aide d'une commande :
meteor npm install --save react react-domJe reçois également une erreur dans la console du navigateur :
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"
}
}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>
);
}
}L'erreur est la suivante :
Erreur non résolue : Le conteneur cible n'est pas un élément DOM.
