process.env is undefinined and I cannot read variable from it

Question

I am trying to modify some variables in my React app according to the environment.

I started using .env file, I have tried all solutions in react evironment variables .env return undefined but with no success.

I am using VS2019, and did the following:

I added dotenv modules. This is a portion of my package.json file:

"dependencies": {
  "@azure/msal-browser": "^2.16.1",
  "@azure/msal-react": "^1.0.1",
  "axios": "^0.21.1",
  "bootstrap": "^5.1.0",
  "dotenv": "^10.0.0", 
  "express": "^4.17.1",
  "jwt-decode": "^3.1.2",
  "react": "^17.0.2",
  "react-bootstrap": "^1.6.1",
  "react-cookie": "^4.1.1",
  "react-dom": "^17.0.2"  
},
"scripts": {
  "clean": "",
  "build": "webpack-cli ./src/index.jsx --config webpack.config.js"
}

Then I edited the server.json file. I added the line:

require('dotenv').config()

app.use('/', express.static('dist', {
     index: "index.html"
}))

I also modified the file webpack.config.js:

const webpack = require('webpack')

....

resolve: {
     extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
},
plugins: [
     new webpack.DefinePlugin({
         BASE_URL_API: JSON.stringify('https://***.azurewebsites.net'),  
         BASE_URL_API_ENV: JSON.stringify(process.env.REACT_APP_BASE_URL_API),  
     })
]

Finally I added 3 .env file in the root folder of the project: .env, .env.development and .env.production.

The content, at the moment, is the same for all files. I have used one of three lines below, not all three lines together:

   REACT_APP_BASE_URL_API = https://***.azurewebsites.net
   REACT_APP_BASE_URL_API = 'https://***.azurewebsites.net'
   REACT_APP_BASE_URL_API = "https://***.azurewebsites.net"

Finally I use the variable in this way:

import axios from 'axios';

export const axiosClient = axios.create({
     baseURL: BASE_URL_API_ENV
     //baseURL: BASE_URL_API <-- This Line Works but it is not what I need 
});

Now when I start the project by VS2019, this command is launched: webpack-cli ./src/index.jsx --config webpack.config.js (it is that one defined in package.json file). But if I manually start the project with the command npm start I get same result:

process.env is undefined.

And the bundled file is that:

What's wrong?

Just adding `react-scripts` as a dependency doesn't mean you're actually _using_ it - you have your own `build` command with a custom Webpack configuration, but it does **not** implement all of the functionality CRA offers. `REACT_APP_` env vars don't happen magically, you need to use the [`DefinePlugin`](https://webpack.js.org/plugins/define-plugin/). — jonrsharpe, Aug 23 '21 at 11:24
i did not want to use react script... Initially I was using webpack... If I do not need `react-script`, I remove it.... — Simone, Aug 23 '21 at 11:26
And you're not _using_ it, you've only _installed_ it. If you want the functionality it offers, you need to either use it (`"build": "react-scripts build"`) or look at how it's implemented and bring that into your own configuration yourself. — jonrsharpe, Aug 23 '21 at 11:27
I stil do not understand how to change values in `DefinePlugin` according to environemnt... In your link I see `'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),` but I still cannot read `process.env` — Simone, Aug 23 '21 at 12:53
Where you _build_ the app you should be able to. It's unclear what you've tried now, I'd suggest giving a [mre] that shows your use of `DefinePlugin` and gets rid of the redundant `react-scripts`. — jonrsharpe, Aug 23 '21 at 12:54
I have updated the post, so it is clear what I have done step by step.. however only step 3 and 5 really changed... I deleted also `react-scripts` — Simone, Aug 23 '21 at 13:05
You're loading the environment variables in the server file, but not in the actual Webpack file where you're trying to use them (as far as we can tell, that doesn't actually look complete). — jonrsharpe, Aug 23 '21 at 13:07
yes, you didnt see the loading in webpack file because it was not there... the answer below is correct infact. — Simone, Aug 23 '21 at 13:16

score 0 · Accepted Answer · answered Aug 23 '21 at 11:39

From the code I feel like the dotenv should be imported and configured in the file where the enviornment variable is used.

Try this:

require('dotenv').config(); 
import axios from 'axios';

export const axiosClient = axios.create({
     baseURL: process.env.REACT_APP_BASE_URL_API
});

I couldn't test this out by myself, so it might produce errors.

process.env is undefinined and I cannot read variable from it

1 Answers1