Erreur : JSDOM is not a constructor

Version imprimable

30/10/2023, 15h46
hamath

Erreur : JSDOM is not a constructor

Bonjour
Pourquoi l'instruction

Code:

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

donne l'erreur

Citation:

typeError : JSDOM is not a constructor at index.js

Merci
31/10/2023, 21h46
Beginner.
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:

1 2 const jsdom = require("jsdom"); const { JSDOM } = jsdom;
Et il faudra installer le package jsdom avec npm par exemple...
02/11/2023, 08h32
hamath

React npm init

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 :

Citation:

JSDOM est déjà déclaré

Merci
02/11/2023, 11h31
Chou-ette

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

React npm init

Bonjour
Voici mon fichier sans le serveur

Code:

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

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:

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

03/11/2023, 11h24
hamath

React npm init

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:

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
03/11/2023, 16h14
Beginner.

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.
03/11/2023, 18h36
NoSmoking
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 :

Citation:

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:

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.
03/11/2023, 19h31
Beginner.

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...
09/11/2023, 08h41
hamath

installer babel et importer babel

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
09/11/2023, 09h32
Chou-ette

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:

https://babeljs.io/docs/usage

Ajouter mon serveur à ce code

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

Code:

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