Webpack: Bundle.js – Error de referencia no detectado: el proceso no está definido

Solución:

Actualización de octubre de 2020:

Para webpack 5, puede hacer referencia process/browser desde el apropiado plugins parte de webpack.config.js

// webpack needs to be explicitly required
const webpack = require('webpack')

module.exports = {

/* ... rest of the config here ... */

  plugins: [
    // fix "process is not defined" error:
    // (do "npm install process" before running the build)
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ]
}

Necesita agregar un complemento para definir su env (en la configuración del paquete web):

   plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ],

Con dotenv módulo de nodo:

PASO 1: INSTALAR dotenv:

yarn add -D dotenv o npm i -D dotenv

PASO 2: AGREGAR .env archivo en la raíz de su proyecto con las variables requeridas:

NODE_ENV=development
apiKey=w23io222929kdjfk
domain=example.domain.org

PASO 3: DEFINE estas variables con webpack.DefinePlugin:

// webpack.config.js
const webpack = require('webpack')
const dotenv = require('dotenv')

module.exports = {
  //...
  plugins: [
    // ...
    new webpack.DefinePlugin({
       'process.env': JSON.stringify(dotenv.config().parsed) // it will automatically pick up key values from .env file
    })
    // ...
  ]
  //...
}

PASO 4: ACCESO environment variables en tus source code:

// src/index.js
alert(process.env.NODE_ENV)
alert(process.env.apiKey)

---

Links importantes:

• dotenv: https://www.npmjs.com/package/dotenv
• webpack.DefinePlugin: https://webpack.js.org/plugins/define-plugin/

Buena suerte…

---

---

Utiliza Nuestro Buscador