Discussion :

[DiverSIG]

Bonjour,

Dans mon appli javascript (avec React), j'ai installé un package pour transformer des fichiers. Quand je lance mon code, j'ai l'erreur :

Code :

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

1
2
3
TypeError: Invalid URL
    at new URL (node:internal/url:825:25)
...

En creusant dans le code source du package, ça vient d'une fonction qui utilise globalThis:

Code :

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

1
2
3
4
const checkSuffix = (base, suffix) => {
  const url = new URL(base, globalThis?.document?.location);
  return url.pathname.slice(-4).toLowerCase() === suffix;
};

En mettant des instructions console.log dans cette fonction, base me renvoie bien le chemin relatif de mon fichier, mais globalThis?.document?.location a pour valeur undefined.

Est-ce qu'il y a quelque chose de particulier à paramétrer pour bien prendre en compte globalThis?

Merci,

Nico

[Toufik83]

Bonjour,

Pourquoi globalThis.document est-il undefined ?
L'objet globalThis est une propriété standard qui permet d'accéder à l'objet global (le contexte) quel que soit l'environnement (navigateur, Node.js, Web Workers).

• Côté Navigateur : globalThis équivaut à window. globalThis.document devrait exister.
  
• Côté Serveur (Node.js) : globalThis équivaut à global. L'objet document n'existe pas nativement dans Node.js.

La cause probable : L'erreur survient généralement parce que le code du package (ou le composant React) est exécuté dans un environnement Node.js (par exemple lors du Server-Side Rendering - SSR avec Next.js, ou lors de tests unitaires avec Jest/Vitest) au lieu du navigateur.

Comment résoudre le problème ?

Solution A : Vérifier l'environnement (si vous pouvez modifier le code)
Si vous avez la main sur le code qui pose problème, assurez-vous que l'accès au DOM ne se fait que côté client :

Code javascript :

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

1
2
const baseLocation = (typeof window !== 'undefined') ? globalThis.location : 'http://localhost';
const url = new URL(base, baseLocation);

Solution B : Utiliser un polyfill ou un environnement de simulation
Si le problème survient pendant des tests (Jest), assurez-vous que votre environnement de test est configuré sur jsdom et non sur node.

Dans votre fichier de configuration (package.json ou jest.config.js) :

Code JSON :

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

1
2
3
"jest": {
  "testEnvironment": "jsdom"
}

Solution C : Problème de version de Node.js
globalThis a été introduit dans Node.js 12. Si vous utilisez une version très ancienne de Node.js pour compiler ou exécuter votre application React, globalThis lui-même pourrait être indéfini. Vérifiez votre version avec node -v.