Erreur : JSDOM is not a constructor

**hamath** · 30/10/2023, 15h46

Bonjour
Pourquoi l'instruction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const dom = new JSDOM ('<! DOCTYPE html><html><body></body></html>');

donne l'erreur

typeError : JSDOM is not a constructor at index.js

Merci

**Beginner.** · 31/10/2023, 21h46

Salut,

Tu as cette erreur parce que JSDOM n'est pas définie... Si c'est cette librairie https://github.com/jsdom/jsdom que tu veux utiliser alors il te faut ajouter ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

Et il faudra installer le package jsdom avec npm par exemple...

**hamath** · 02/11/2023, 08h32

Bonjour
J'ai essayé cela mais j'ai des erreurs
Dans mon fichier aulieu de faire const jsdom= require('jsdom'); j'ai écrit import JSDOM from "jsdom"; et avec const {JSDOM} = jsdom ; j'ai une erreur qui est :

JSDOM est déjà déclaré

Merci

**Chou-ette** · 02/11/2023, 11h31

Il faudrait nous donner tout le code du fichier plutôt que nous laisser jouer aux devinettes.

**hamath** · 02/11/2023, 13h35

Bonjour
Voici mon fichier sans le serveur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
import JSDOM from "jsdom";
import ReactJSDOM from "react-jsdom";
import React from "react";
import ReactDOM from "react-dom";
 
const dom = new JSDOM (`<DOCTYPE html><html><body></body></html>`);
const document = dom.window.document;
const h2 = document.createElement('h2');
h2.textContent ='Hello';
document.getElementById('mroot').appendChild(h2);

**Beginner.** · 02/11/2023, 15h58

Entre import et require, Il te faut choisir...

Sinon en général pour démarrer et voir si la librairie fonctionne coorectement, on teste un code simple et basique comme celui qui est donné :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
 
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log(dom.window.document.querySelector("p").textContent); // "Hello world"

Essaye d'abord cela...

**hamath** · 03/11/2023, 11h24

Bonjour
J'ai bien compris, l'essai a bien fonctionné, node index.js affiche bien hello World
Ce que je voudrais faire maintenant c'est afficher hello World dans le browser avec react et la fonction render

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ReactDOM.render (<h2>hello World</h2>, document.getElementById('mroot'));

La fonction render dans le fichier index.js pour afficher hello World et le conteneur avec un id='mroot' dans un autre fichier index.html.
Le serveur je l'écris dans index.js
Merci

**Beginner.** · 03/11/2023, 16h14

Salut,

Eh bien si on se base sur le code que tu as posté c'est normal qu'il ne fonctionne pas car il y a quelques erreurs : il manque un "!" (<!DOCTYPE et non <DOCTYPE) et surtout l'instruction document.getElementById('mroot').appendChild(h2); pose problème car dans le code HTML, il n'y a pas d’élément ayant 'mroot' comme id.

**NoSmoking** · 03/11/2023, 18h36

Bonjour,
je pense que la première des choses que tu ais à faire est d'utiliser la version 18.x de React qui date quand même depuis plus d'un an. (Release 18.0.0 (March 29, 2022)).

Tu pourras lire dans ce lien que, entre autres :

createRoot: New method to create a root to renderor unmount. Use it instead of ReactDOM.render. New features in React 18 don't work without it.

... en gros oublie ReactDOM.render !

Pour débuter la documentation est bien faite et donne un exemple des plus simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

Tu trouveras cela la doc. au paragraphe : Le rendu des éléments.

**Beginner.** · 03/11/2023, 19h31

Salut,

Je précise pour éviter toute ambiguïté que le code (dont je parle au message 8) c'est celui posté au message 5 et non celui posté au message 7...

**hamath** · 09/11/2023, 08h41

Je voudrais installer babel et importer babel librairie dans mon fichier index.js pour résoudre l'erreur syntaxError Unexpected token '<'
Je voudrais savoir comment faire
Merci

**Chou-ette** · 09/11/2023, 09h32

Babel n'a rien à voir avec votre erreur et je ne vois pas comment cette idée vous est venue. Mais qui suis-je pour vous empêcher d'installer Babel ? Voici la marche à suivre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

https://babeljs.io/docs/usage

**hamath** · 13/11/2023, 08h03

Bonjour
Je voudrais ajouter le serveur web express à ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
const jsdom= require ("jsdom");
const {JSDOM} = jsdom ;
const dom= new JSDOM (`<! DOCTYPE html><p>Hello World</p>`);
const express= require ("express");
const app = express ();
const port = 8000;
app.listen (port, ()=> {
 console.log (`The server is listening on port ${port}`);
  console.log (dom.window.document.querySelector("p").textContent);
});

Erreur : JSDOM is not a constructor

React

Discussions similaires

Partager

Partager