reactjswebpackwebpack-dev-server

Webpack: process.env undefined using DefinePlugin and DotEnv


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 ?


Solution

  • 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!