title: Using process.env in react
body: <p>I am trying to dynamically assign the IP address based if it is a production or development environment.</p>
  <p>The react is served via a Django app.</p>
  <p>The <code>.env</code> is in the root project of the react app at the same level as the package.json file</p>
  <pre><code>REACT_APP_AXIOS_URL=127.0.0.1:8000
  </code></pre>
  <p>I call it this way</p>
  <pre><code>require('dotenv').config()
  
  const API_URL = process.env.REACT_APP_AXIOS_URL
  console.log(API_URL)
  </code></pre>
  <p>I get the following error in the console:</p>
  <pre><code>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
  </code></pre>
  <p>Can someone please tell me what I did wrong?</p>
  <p><strong>EXTRA INFO:</strong></p>
  <p>here is my package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;frontend&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;webpack --mode development --entry ./src/index.js --output-path ./static/&quot;,
      &quot;prod&quot;: &quot;webpack --mode production --entry ./src/index.js --output-path ./static/&quot;
    },
    &quot;keywords&quot;: [],
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.15.5&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.15.6&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.14.5&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
      &quot;css-loader&quot;: &quot;^6.3.0&quot;,
      &quot;file-loader&quot;: &quot;^6.2.0&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;sass-loader&quot;: &quot;^12.1.0&quot;,
      &quot;style-loader&quot;: &quot;^3.3.0&quot;,
      &quot;url-loader&quot;: &quot;^4.1.1&quot;,
      &quot;web-vitals&quot;: &quot;^2.1.0&quot;,
      &quot;webpack&quot;: &quot;^5.55.1&quot;,
      &quot;webpack-cli&quot;: &quot;^4.8.0&quot;
    },
    &quot;dependencies&quot;: {
      &quot;axios&quot;: &quot;^0.21.4&quot;,
      &quot;bootstrap&quot;: &quot;^5.1.1&quot;,
      &quot;crypto-browserify&quot;: &quot;^3.12.0&quot;,
      &quot;dotenv&quot;: &quot;^10.0.0&quot;,
      &quot;react-bootstrap&quot;: &quot;^2.0.0-rc.0&quot;,
      &quot;react-dropzone&quot;: &quot;^11.4.2&quot;,
      &quot;react-router-dom&quot;: &quot;^5.3.0&quot;,
      &quot;ts-node&quot;: &quot;^10.3.0&quot;
    }
  }
  </code></pre>
  <p>React is set up using Dockerfile</p>
  <pre><code>RUN apt-get update \
      &amp;&amp; apt-get install -y curl \
      &amp;&amp; curl --silent --location https://deb.nodesource.com/setup_12.x | bash - \
      &amp;&amp; apt-get install -y nodejs \
      &amp;&amp; npm install --silent\
      &amp;&amp; npm install react-scripts@4.0.3 -g --silent
  </code></pre>
  <p>I then start react using the following</p>
  <pre><code>(cd frontend/src &amp;&amp; npm run dev)
  </code></pre>
  <p>Here is my webpack.config.js</p>
  <pre><code>module.exports = {
  
      resolve: {
          fallback: {
              &quot;os&quot;: false,
              &quot;fs&quot;: false,
              &quot;tls&quot;: false,
              &quot;net&quot;: false,
              &quot;path&quot;: false,
              &quot;zlib&quot;: false,
              &quot;http&quot;: false,
              &quot;https&quot;: false,
              &quot;stream&quot;: false,
              &quot;crypto&quot;: false,
              &quot;crypto-browserify&quot;: 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: &quot;babel-loader&quot;,
              },
              {
                  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,
                          },
                      },
                  ],
              },
          ]
      }
  };
  </code></pre>