Webpack: process.env non défini à l'aide de DefinePlugin et DotEnv

Il existe plusieurs façons de faire en sorte que cela fonctionne.

Le plus simple à tester est de changer votre "start": "webpack-dev-server --config webpack.dev.js", en "start": "REACT_APP_MYAPP = http : // localhost: 8080 / node webpack-dev-server --config webpack.dev.js ",

Cela injectera la variable d'environnement et elle sera disponible pendant le processus de construction du webpack. Vous pouvez utiliser cette technique lorsque vous utilisez npm ou node pour exécuter une commande. Par exemple, NODE_ENV = 'development REACT_MY_APP = http: // localhost: 8080 / node myapp.js et les deux seront disponibles sur process.env .

Vous pouvez également appeler votre fichier require ('dotenv'). config () dans votre webpack.dev.js . Ensuite, il serait défini lors de votre utilisation du DefinePlugin.

En général, vous n'utilisez pas la commande npm start pour exécuter votre serveur de développement.

Au fur et à mesure que l'application grandit, vous devriez consulter l ' environnement Webpack Plugin . Ensuite, vous pouvez utiliser le .env pour les paramètres de construction "production", en l'exigeant dans le webpack.prod.js de production, tout en définissant vos variables d'environnement par défaut / de secours à l'aide du plugin.

La première solution en ajoutant REACT_APP_MYAPP au démarrage n'a pas fonctionné. Mais la deuxième solution a fonctionné.

SOLUTION:

Ajout du fichier require ('dotenv'). Config () dans mon webpack.dev.js et en remplaçant:

    new webpack.EnvironmentPlugin(['NODE_ENV', 'REACT_APP_MYAPP']);

par

   new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify("development"),
        "process.env.REACT_APP_MYAPP": JSON.stringify(process.env.REACT_APP_MYAPP)
    })

Merci!

Cela fonctionne pour moi dans mon modèle d'application React personnalisé, uniquement si je n'inclus pas 'REACT_APP_' dans les noms de variables:

dans webpack.config.js:

NODE_ENV=development
API=http://localhost:5000

en .env:

// Node import
const path = require('path');

const webpack = require('webpack');

require('dotenv').config();

module.exports = [
   plugins: [
    new webpack.EnvironmentPlugin(['NODE_ENV', 'API'])
  ],
]

Quand je déploie l'application (sur Netlify par exemple), j'exclus NODE_ENV des variables d'environnement de production.

p >

Voyager dans le terrier profond et sombre du lapin vous mènera aux faits suivants:

• Webpack 5 ne fournit plus process ni d'autres variables Node.js .
• Le rôle de DefinePlugin doit être redéfini.
• Les valeurs transmises à DefinePlugin doivent être stringified , même s'il s'agit de chaînes.
• EnvironmentPlugin rend les choses plus confuses, étant donné Webpack 5.
• process.env n'est pas vraiment quelque chose que vous devriez utiliser dans l'interface.
• Vous pouvez utiliser polyfills pour rajouter processus et d'autres, mais il y a une raison pour laquelle il n'est plus disponible .
• dotenv-wepack n'est ni nécessaire ni la voie à suivre. li >
• La raison d'utiliser process.env est d'accéder aux variables globalement. Mais c'est un passager sur le mauvais vol. Nous pouvons le supprimer et accéder directement à la variable voulue:

declare var process: any;
console.log(process) // will NOT work, because process hasn't been injected
console.log(process.env); // will work but risky
console.log(process.env.USERNAME); // correct: 'Donald Hump'

Dans le frontend:

plugins: [
    new DefinePlugin({
        // this might expose confidential data about your environment
        'process.env': JSON.stringify(process.env),

        // the correct way
        'process.env.USERNAME': JSON.stringify('Donald Hump')
    })
  ]

Si vous avez plusieurs objets avec des variables, il est logique d'abstraire la stringification:

// Create a function to stringify values
function stringifyValues(object: {[key: string]: any;}){
    return Object.entries(object).reduce((acc, curr) => ({...acc, [`${curr[0]}`]: JSON.stringify(curr[1]) }), {} as { [key: string]: string; });
}

// use with DefinePlugin
plugins: [
    new DefinePlugin({
      ...stringifyValues(dotenv.config().parsed),
      ...stringifyValues(dotenv.config({ path: '/.env.special' }).parsed),
      'myObject': stringifyValues({ 
            name: 'Object', 
            description: 'to be an object' 
      })
    })
  ]

Si vous vraiment voulez accéder à process.env:

declare var myString: string;
console.log(myString); // 'IAmAString'

Dans le frontend:

plugins: [
    new DefinePlugin({
        // With dotenv (values must be stringified)
        ...Object.entries(dotenv.config().parsed).reduce((acc, curr) => ({...acc, [`${curr[0]}`]: JSON.stringify(curr[1]) }), {}),
        
        // Without dotenv 
        'myString': JSON.stringify('IAmAString')
    })
  ]