Webpack: process.env undefined using DefinePlugin and DotEnv

webpack defineplugin not working
dotenv-webpack not working
webpack define plugin typescript
webpack defineplugin variable is not defined
dotenv-webpack react
dotenv npm webpack
dotenv-webpack github
webpack defineplugin node_modules

I would like to get my variable from my .env file but I always get undefined

This is my js code :

require('dotenv').config();
class Header extends React.Component{
    constructor(props){...}
    render(){
        console.log("NODE ENV", process.env.NODE_ENV);
        console.log("REACT_APP_MYAPP", process.env.REACT_APP_MYAPP);
        ...
   }
}

This prints :

NODE_ENV development

REACT_APP_MYAPP undefined

In my package.json there is :

"scripts":{
      "start" : "webpack-dev-server --config webpack.dev.js",
      "build" : "webpack --config webpack.prod.js"
 }

And in my webpack.dev.js:

const webpack = require("webpack");
const merge = require("webpack-merge");
const path = require("path");
const common = require("./webpack.common.js");

module.exports = merge.smart(common, {
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        hot: true,
        overlay: {
            warnings: true,
            errors: true
        },
        inline :true,
        historyApiFallback: true,
        port: 8085
    },
    devtool: "inline-sourcemap",
    optimization: {
        namedModules: true
    },
    plugins: [
        new webpack.HotModulReplacementPlugin(),
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify("development"),
            "process.env.REACT_APP_MYAPP": JSON.stringify(process.env.REACT_APP_MYAPP)
        })
    ],
    mode: "development"
});

And I placed my .env file at the root of my project, next to webpack.dev.js and package.json:

REACT_APP_MYAPP=http://localhost:8080/

So I think, it doesn't success to get the variable in the file.

How can I get the REACT_APP_MYAPP value in the code please ?

There's a few ways you could make this work.

The easiest to test is to change your "start" : "webpack-dev-server --config webpack.dev.js", to "start" : "REACT_APP_MYAPP=http://localhost:8080/ node webpack-dev-server --config webpack.dev.js",

This will inject the environment variable and it will be available during the webpack build process. You can use this technique whenever using npm or node to run a command. For instance, NODE_ENV='development REACT_MY_APP=http://localhost:8080/ node myapp.js and both will be available on process.env.

You could also call your require('dotenv').config() file inside your webpack.dev.js. Then it would be set during your usage of the DefinePlugin.

Generally, you don't use the npm start command to run your development server.

As the application grows you should look at the Webpack Environment Plugin. Then you can use the .env for the "production" build settings, requiring it in the production webpack.prod.js, while setting your default/fallback environment variables using the plugin.

Webpack: process.env undefined using DefinePlugin and DotEnv , There's a few ways you could make this work. The easiest to test is to change your "start" : "webpack-dev-server --config webpack.dev.js",� The default value for a key is taken if the key is undefined in process.env. new webpack. EnvironmentPlugin ({NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined DEBUG: false}); Variables coming from process.env are always strings. Unlike DefinePlugin, default values are applied to JSON.stringify by the

First solution by adding REACT_APP_MYAPP in start didn't worked. But second solution worked.

SOLUTION:

Adding require('dotenv').config() file inside my webpack.dev.js and replacing :

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

with

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

Thank you!

Failed to load ./.env. � Issue #121 � mrsteele/dotenv-webpack � GitHub, env. dotenv-webpack version : ^1.5.5 I do server side rendering with DefinePlugin({ 'process.env. And in both cases they are undefined. npm install dotenv-webpack --save-dev. Description. dotenv-webpack wraps dotenv and Webpack.DefinePlugin. As such, it does a text replace in the resulting bundle for any instances of process.env. Your .env files can include sensitive information. Because of this,dotenv-webpack will only expose environment variables that are explicitly

It works for me in my custom React app model, only if I do not include 'REACT_APP_' in variable names:

in webpack.config.js:

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

const webpack = require('webpack');

require('dotenv').config();

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

in .env:

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

When I deploy the app though (on Netlify for example), I exclude NODE_ENV from the production environment variables.

Environment Variables : Webpack config using DefinePlugin, I would like to get my variable from my .env file but I always get undefined This is my js code : require('dotenv').config(); class Header extends React.Component{� Dotenv is commonly used (create-react-app uses it, so there) and will get the variables from our .env file and add them to the global process.env. $ npm install --save-dev dotenv Adding the

dotenv-webpack, Webpack by default does not provide any process to load '.env' files. but there many plugins and dotenv (NPM Package); DefinePlugin (Webpack Plugin ) We can use Define plugin in webpack.config file under plugins key Use a custom webpack config with full control mode that adds a DefinePlugin to set { 'process.env.FOO': 'blah' } and in your story console log the value of process.env.FOO. Browse to your story and process.env.FOO will be undefined.

EnvironmentPlugin - Webpack, dotenv-webpack wraps dotenv and Webpack.DefinePlugin . As such, it does a text replace in the resulting bundle for any instances of process. However, with process.env.NODE_ENV set to 'production' they might drop or add significant portions of code to optimize how things run for your actual users. Since webpack v4, specifying mode automatically configures DefinePlugin for you: webpack.prod.js

next.config.js: Environment Variables, The default value for a key is taken if the key is undefined in process.env . Unlike DefinePlugin , default values are applied to JSON.stringify by the The third-party DotenvPlugin ( dotenv-webpack ) allows you to expose (a subset of) dotenv� webpack's environment variables are different from the environment variables of operating system shells like bash and CMD.exe. The webpack command line environment option--env allows you to pass in as many environment variables as you like. Environment variables will be made accessible in your webpack.config.js.

Comments
  • Possible duplicate of React + webpack: 'process.env' is undefined
  • Not a duplicate
  • Why shouldn't I use npm start for my dev server ?
  • When deploying for production, most default solutions will run npm start to kick off the application (after running npm build). This isn't forced. You could create a start:production, but it would be run as npm run start:production...so it's more just following the "default assumption". It also doesn't require the run in front of the npm command.
  • I will test to confirm, but looks like running webpack-dev-server is not passing the ENV_VARS into the process it runs webpack in. I think adding node in front would fix this. Also, if your application is going to be only client side, and you're uploading all the build files to be statically served then having npm start run the devServer doesn't really matter, as you won't be running a "production" node.js server to kick off the build. That would be more important if this was a "Server Side Rendered" (SSR) React App.
  • You absolutely should not use .env files in your production, or even include them in your source control. Follow 12 Factor app development: "Apps sometimes store config as constants in the code. This is a violation of twelve-factor, which requires strict separation of config from code. Config varies substantially across deploys, code does not."
  • This debate over strict 12-factor pans out at work a lot. Modern webpack built apps require funky hacks unless you allow for per environment builds.