Question 73136 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Not Being Able to use ENV variables in React – Reactjs

i want to put the url in a env file, but when i do that i get a html object back and not my json object it also says my REACT_APP__API_URL is undefined? but i defined it in the root directory of my project in a .env file. When i hardcode the url again it works fine. i am using REACT and SYMFONY 6.2 as my api.

MY REACT CODE

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import brand from 'boss-api/dummy/brand';
import { withStyles } from '@material-ui/core/styles';
import { SourceReader, PapperBlock } from 'boss-components';
import { EditableCellDemo, EditableCellFrmDemo } from './demos';
import axios from 'axios';
import { EditDocuments } from '../../components/EditDocuments';
import SearchIcon from '@material-ui/icons/Search';
import { Modal, Button, TextField } from '@material-ui/core';
import { EditorState } from 'draft-js';


const styles = ({
  root: {
    flexGrow: 1,
  },
  button: {
    margin: '1rem',
  },
  modal: {
    margin: 'auto',
    maxWidth: 600,
    width: '90%',
    height: '100%'
  },
  paper: {
    backgroundColor: 'white',
    boxShadow: '5px 5px 20px rgba(0, 0, 0, 0.3)',
    padding: '2rem',
    borderRadius: '5px',
  },
  textField: {
    marginBottom: '1rem',
  },
});

function Documents(props) {
  const title = brand.name + ' - Table';
  const description = brand.desc;
  const docSrc = 'containers/Tables/demos/';
  const { classes } = props;
  const [openModal, setOpenModal] = useState(false);
  const [documents, setDocuments] = useState([]);
  const [documentTitle, setTitleSearch] = useState('');
  const [newDocuments, setNewDocument] = useState({
    document_title: '',
    document_status: '',
    });

    useEffect(() => {
      axios.get(`${process.env.REACT_APP_API_URL}/getDocuments`, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        console.log(response);
        console.log(process.env.REACT_APP_API_URL)
        setDocuments(response.data.document);
      })
      .catch(error => console.log(error));
    }, []);

my .env file

REACT_APP_API_URL=http://127.0.0.1:8000

UPDATE
i changed my .env file to .env.production name

this is a screenshot of my directories enter image description here

and this is my package.json with the scripts

 "build": "env-cmd .env cross-env NODE_ENV=production NODE_OPTIONS=--openssl-legacy-provider webpack --config internals/webpack/webpack.prod.babel.js --color --progress",
```

``` 
"start": "cross-env NODE_OPTIONS=--openssl-legacy-provider node server --dotenv",

   "build:dll": "node ./internals/scripts/dependencies.js",
```

the react code stayed the same
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The Fix was adding it in my webpack config file as plugin, since i am using webpack 5 as u can see below

     new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
    }),
    new webpack.EnvironmentPlugin({
      REACT_APP_API_URL: 'https://127.0.0.1:8000',
    }),

  2. 0

    The code is working, try to using different .env.development file (editor mode) and .env.production file (release mode). Remember to terminate server and restart again.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search