reactjs - Usar variable de entorno en Typescript con ParcelJS

Migrando una aplicación de React construida con ParcelJS a Typescript/React, encuentro algunos problemas con las variables de entorno. En realidad, el problema parece afectar solo la salida de errores, ya que las variables de entorno (URL, usadas en una etiqueta <a>) funcionan correctamente en la página web.

Aquí está la salida del terminal:

/Users/---/Projects/---/---/src/cart/index.tsx(xxx,xxx)
Cannot find name 'process'.
126 |       method: "post",
127 |       url: `${process.env.URL}/checkout`,
    |               ^^^^^^^
128 |       data: cart,

Intenté varios enfoques, como import * as process from "process", lo cual no solucionó el problema:

Could not find a declaration file for module 'process'.
'./node_modules/process/index.js' implicitly has an 'any' type.
Try `npm install @types/process` if it exists or add a new 
declaration (.d.ts)     file containing `declare module 'process';`
  > 6 | import * as process from "process";
  |                          ^^^^^^^^^

Sin embargo, si intento mostrar la variable, eso funciona:

const ENV = process.env.MIDDLEWARE_URL;
console.log('ENV', ENV);

Salida del navegador:

ENV http://localhost:3000

Finalmente, no puedo determinar si esto es un problema de Parcel o un problema de TSConfig. ¿Alguna idea?

Respuesta #1

En el desarrollo de Node.js con TypeScript, se supone que el paquete @types/node se debe usar para declaraciones específicas de Node, incluyendo process. No es adecuado para el navegador porque probablemente no tiene nada en común con el entorno de Node.js excepto el global process.

La importación del módulo incorporado process es redundante en Node.js y ciertamente no debería usarse en el navegador, porque no existe tal módulo (aunque hay un módulo de reemplazo, no es necesario para process.env).

Si process fue definido por un empaquetador (ParcelJS) en un script del lado del cliente, se debe proporcionar una declaración de tipo para ello en un archivo de tipos personalizado (por ejemplo, typings/custom.d.ts):

declare const process: {
    env: {
        ENV: string;
        URL: string;
    }
}

La ruta de las definiciones personalizadas también debe especificarse en la configuración de TypeScript:

"typeRoots": ["./node_modules/@types", "./typings"]

Respuesta #2

Para añadir a una respuesta a un comentario dejada por @Kleioz porque todavía tuve que buscar en Google qué estaba pasando...

La solución fue agregar typeRoots a la configuración de TypeScript. Esto básicamente le indica al compilador dónde están las declaraciones de node_module. También puedes pasar una carpeta para declaraciones personalizadas si es necesario.

{
  "compilerOptions": {
    ...
    "typeRoots": ["./node_modules/@types", "./typings"]
    ...
  }
}

./typings es tu carpeta para declaraciones personalizadas.