globalThis renvoie undefined

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:

---

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:

---

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

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:

---

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:

---

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.