Using process.env in react

Question

I am trying to dynamically assign the IP address based if it is a production or development environment.

The react is served via a Django app.

The .env is in the root project of the react app at the same level as the package.json file

REACT_APP_AXIOS_URL=127.0.0.1:8000

I call it this way

require('dotenv').config()

const API_URL = process.env.REACT_APP_AXIOS_URL
console.log(API_URL)

I get the following error in the console:

main.js:83 Uncaught ReferenceError: process is not defined
    at Object.config (main.js:83)
    at eval (index.js:13)
    at Object../src/index.js (main.js:700)
    at __webpack_require__ (main.js:2244)
    at main.js:2489
    at main.js:2491

Can someone please tell me what I did wrong?

EXTRA INFO:

here is my package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --entry ./src/index.js --output-path ./static/",
    "prod": "webpack --mode production --entry ./src/index.js --output-path ./static/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "file-loader": "^6.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.3.0",
    "url-loader": "^4.1.1",
    "web-vitals": "^2.1.0",
    "webpack": "^5.55.1",
    "webpack-cli": "^4.8.0"
  },
  "dependencies": {
    "axios": "^0.21.4",
    "bootstrap": "^5.1.1",
    "crypto-browserify": "^3.12.0",
    "dotenv": "^10.0.0",
    "react-bootstrap": "^2.0.0-rc.0",
    "react-dropzone": "^11.4.2",
    "react-router-dom": "^5.3.0",
    "ts-node": "^10.3.0"
  }
}

React is set up using Dockerfile

RUN apt-get update \
    && apt-get install -y curl \
    && curl --silent --location https://deb.nodesource.com/setup_12.x | bash - \
    && apt-get install -y nodejs \
    && npm install --silent\
    && npm install react-scripts@4.0.3 -g --silent

I then start react using the following

(cd frontend/src && npm run dev)

Here is my webpack.config.js

module.exports = {

    resolve: {
        fallback: {
            "os": false,
            "fs": false,
            "tls": false,
            "net": false,
            "path": false,
            "zlib": false,
            "http": false,
            "https": false,
            "stream": false,
            "crypto": false,
            "crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify
        }
    },

    module: {


        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: "babel-loader",
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
        ]
    }
};

Answer 1

Install dotenv-webpack and then everything should work ;-) https://www.npmjs.com/package/dotenv-webpack

.env

REACT_APP_AXIOS_URL=127.0.0.1:8000

---

const API_URL = process.env.REACT_APP_AXIOS_URL
console.log(API_URL)

Answer 2

Did you add:

require('dotenv').config()

and before that you should install as follows:

# with npm
npm install dotenv

# or with Yarn
yarn add dotenv

and then you can use...

process.env.REACT_APP_AXIOS_URL