Comment éviter l'erreur React "Uncaught ReferenceError: process is not defined" ?

La librairie React est aujourd'hui une des librairies les plus populaires dans le langage JavaScript. Elle s'enrichit à chaque version de nouveautés et de fonctionnalités. L'une d'entre elles est le "Hot reload". Elle permet de modifier directement un composant dans votre code et de voir instantanément le résultat dans votre fenêtre de test, sans devoir recharger l'application. Cependant, il existe un bug qui provoque l'affichage d'une iframe avec le message d'erreur "Uncaught ReferenceError: process is not defined". Il existe plusieurs solutions pour résoudre ce problème.

Ce problème vient de la librairie "react-error-overlay", qui est une dépendance de la librairie "react-scripts". Le fait de mettre à jour la librairie "react-scripts" vers la version 5 résout le problème, car l'erreur est corrigée avec la version "6.0.9" de la librairie "react-error-orverlay".

Si vous ne pouvez pas ou ne voulez pas mettre à jour la librairie "react-scripts" vers la version 5, ou si la mise à jour ne fonctionne pas, il faut "forcer" l'utilisation de la version "6.0.9" pour la librairie "react-error-overlay". Il est possible de le faire avec votre gestionnaire de paquets, que ce soit Yarn ou NPM. Avec Yarn, il faut ajouter la directive "resolutions" dans le fichier "package.json" à la racine de votre projet.

"resolutions": {
    "react-error-overlay": "6.0.9"
}

Si vous utilisez NPM, la directive n'est pas la même selon votre version. Avant la version 8.3.0, il faut utiliser les directives "resolutions" et "devDependencies", et indiquer avec la directive "preinstall" à NPM d'utiliser les résolutions. La version "8.3.0" a simplifié le fonctionnement, il suffit de paramétrer la directive "overrides".

//Avant la version 8.3.0
"resolutions": {
    "react-error-overlay": "6.0.9"
},
"scripts":{
    "preinstall": "npx npm-force-resolutions",
},
"devDependencies":{
    "react-error-overlay": "6.0.9",
}
//À partir de la version 8.3.0
"overrides": {
  "react-error-overlay": "6.0.9"
}

Il existe également une méthode moins utilisée en utilisant un plugin de webpack. Avec le plugin "craco", à partir de sa version "6.3.0", vous pouvez modifier le fichier "craco.config.js" en ajoutant un plugin, qui va résoudre le problème.

{
  ...
  webpack: {
    plugins: {
      add: [
        new webpack.DefinePlugin({
          process: {env: {}}
        })
      ]
    }
  }
}

Vous pouvez également utiliser le plugin "customize-cra". Il faut alors modifier le fichier "config-overrides.js". Avec cette technique, un message d'avertissement sera émis lors de la compilation, mais cela n'engendre aucune erreur.

const webpack = require('webpack');
const { override, addWebpackPlugin } = require('customize-cra');

module.exports = override(
  addWebpackPlugin(
    new webpack.DefinePlugin({
      process: { env: {} },
    })
  )
);

JavaScript