Réagir une référence non apprise: le processus n'est pas défini

Beaucoup de réponses suggèrent de remplacer le react-error-overlay à 6.0.9 , mais cela n'a pas fonctionné pour moi (le 11 février 2022). J'utilisais React-Scripts 5.0.0 et React-Error-Overlay 6.0.10 avant d'essayer le remplacement de la superposition.

Au lieu de passer par le harcèlement de définir la configuration de webpack dans mon application CRA (comme suggéré par SMAC89 ), j'ai rétréci react-scripts à 4.0.3 .

Cela fonctionne bien avec react-scripts: 4.0.3 , qui a résolu react-error-overlay à 6.0.10 .

donc, mon correctif est:

• Définir "React-Scripts": "4.0.3" dans package.json
• Supprimez votre fichier de verrouillage (yarn.lock ou package-lock.json) et node_modules
• Exécutez l'installation

Face au même problème aujourd'hui (14 février 22) à l'aide de conteneurs Docker pour une application ReactJS et je l'ai résolu en rétrogradant la version React-Scripts à 4.0.3 et en installant également React-Error-Overlay sur la version 6.0.9. Les étapes étaient donc:

J'espère que cela aide quelqu'un à gagner du temps, Bravo.

Pour ceux qui utilisent Create-React-App avec Persuhalize-CRA, vous pouvez utiliser la solution Method 2 à partir de @ smac89 avec addWebpackPlugin, cela fonctionne pour moi.

React-Scripts: 5.0.0 webpack: 5.64.4

WARNING in DefinePlugin
Conflicting values for 'process.env'

Cette solution lance un avertissement sur le démarrage NPM mais l'application compile correctement.

// config-overrides.js
const webpack = require('webpack');
const { override, addWebpackPlugin } = require('customize-cra');

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

L'avertissement n'a rien freiné mais si quelqu'un sait comment le réparer, veuillez répondre à ce fil :)

dans yarn.lock ou package-lock.json Fichier pour trouver la chaîne

react-error-overlay@^6.0.9:
  version "6.0.9"
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
  integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==

et remplacer à

"react-error-overlay@npm:^6.0.9":
  version: 6.0.10 <-- here problem
  etc...

fichier enregistré et exécuter Installation du fil

J'ai trouvé la meilleure solution.

Le problème est parce que vous perdez window.process Variable lorsque vous réagissez les charges chaudes, et le processus existe uniquement sur le nœud, pas le navigateur.

Vous devez donc l'injecter au navigateur lorsque l'application se charge.

Ajoutez cette ligne à app.js

useEffect(() => {
    window.process = {
      ...window.process,
    };
  }, []);

Pour ceux qui ont encore des problèmes avec ceci: si vous utilisez WebPack, exécutez npm install -d dotenv-webpack et si vous utilisez TypeScript npm install -d @ types / dotenv-webpack code >.
Ensuite, dans votre configuration Webpack, ajoutez Importer Dotenv à partir de "Dotenv-webpack"; Et

...
plugins: [
    ...
    new Dotenv(),
],
...

La seule solution qui a fonctionné pour moi a été une modification de ce que @ smac89 a écrit pour Craco. Ajoutez d'abord le processus en tant que dépendance.

const webpack = require('webpack');

module.exports = {
webpack: {
     ...
     plugins: {
        add: [
            new webpack.ProvidePlugin({
                process: 'process/browser.js',
            }),
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
            }),
        ],
      },
    },
};

puis ajoutez ces lignes à votre craco.config.js.

yarn add process or npm i process

Ceci, à son tour, n'affiche pas l'avertissement ci-dessous dans la console chaque fois que vous démarrez le projet.

J'ai eu le même problème dans ReactJS et je l'ai corrigé avec ces étapes:

Ajouter à package.json:

La mise à niveau des react-scripts 4.0.3 à 5.0.0 n'a pas fonctionné pour moi. La seule chose qui a finalement fonctionné est la solution proposée ci-dessus

en utilisant le fil

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

puis l'installation du fil

pour NPM, je pense que "les résolutions" doivent être remplacé par "remplacer"

Merci, cela fonctionne pour moi, comme Kaleb disait

Si vous utilisez WebPack, exécutez NPM Install -d Dotenv-webpack et si vous utilisez TypeScript npm install -d @ types / dotenv-webpack. Ensuite, dans votre configuration Webpack, ajoutez l'importation doletenv à partir de "Dotenv-webpack"; Et

plugins: [
    ...
    new Dotenv(),
],

Je viens de mettre à jour la version de React-Script maintenant cela fonctionne bien pour moi

  "dependencies": {    
    "react-scripts": "5.0.0",
  },