What causes the result of UNDEFINED when accessing an ENVIRONMENT VARIABLE in a REACT application?

Unfortunately, I've hit a roadblock with this seemingly simple question and can't seem to find the answer.

I'm having trouble accessing environment variables in a specific file.

I am using create-react-app (^16.11.0)

  • The .env file is located in the root folder next to package.json
  • I have declared the variable as REACT_APP_API=http://localhost:4000
  • I try to call the variable using process.env.REACT_APP_API
  • The server has been restarted multiple times

Oddly enough, I can access the variable in one folder but not in another.

Here is a link to the workflow structure of my files workflow structure

Thank you so much for your assistance!

javascriptreactjsenvironment-variables

Answer №1

A HUMOROUS DISCOVERY! It's often the case that the reason behind a problem is unexpectedly funny.

While typing process.env.REACT_APP_API, my IDE automatically inserted an import statement at the top of the file

import process from "process";

This caused me to be unable to access process.env in a specific file.

Once the import was removed, the problem was solved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fetch data asynchronously prior to loading the DOM

Currently in the learning process and facing a hurdle concerning how to retrieve data from an async function and display it in the DOM. The issue I'm encountering is that I am receiving 'undefined' as the DOM gets rendered before the async ...

reactjsasynchronousasync-awaitnext.js

In search of a highly efficient webservices tutorial that provides comprehensive instructions, yielding successful outcomes

I've reached a point of extreme frustration where I just want to break things, metaphorically speaking, of course. For the past week, I've been trying to learn how to create a web service using C# (whether it's WCF or ASMX, I don't rea ...

c#javascriptjqueryajaxweb-services

Retrieve the response status using a promise

There is a promise in my code that sometimes results in an error response (either 400 or 403, depending on the user). I am trying to handle this situation by catching the response and implementing a conditional logic to execute different functions based on ...

javascriptreactjstypescriptsharepoint

Modifying tag classes dynamically with JavaScript

I am working on creating a list of projects where the user can select one as the default project for future use in other processes. The issue I am facing is that each project in the list has a unique id and by default, they all have the RegularIcon class ...

javascriptvue.js

The functionality of scope.$observe is unavailable within an AngularJS Directive

Consider the snippet below: appDirectives.directive('drFadeHighlight', ['$animate', '$timeout', function ($animate, $timeout) { return { scope: { isWatchObject: '=' }, restric ...

javascriptangularjsangularjs-directive

The setState function in the useState hook is being called only one time when triggered by an EventListener

Within my functional component, I am utilizing the useState hook to store state. When the user reaches the bottom of the page, I want to dynamically add content. To achieve this, I implemented an EventListener for 'scroll' within a useEffect hook ...

javascriptreactjsreact-hooksnext.jsevent-listener

Exploring the power of NodeJS modules through exports referencing

Encountering difficulties referencing dynamic variables related to mongoose models based on user session location value. Two scripts are involved in this process. The first script is called location.js & reporting.js In the location.js script: module.ex ...

javascriptnode.jssessionexpress

Capturing C# log data for JavaScript interactions

Can anyone provide recommendations on how to capture JavaScript interactions in a browser using C#? I am interested in developing a web crawler that can track these interactions, allowing me to search for potentially harmful calls. ...

c#javascript

Encountering an issue with the default task in gulp, an error is displayed in Gitbash stating: "Task must have a name that is a string

Upon running the command 'gulp' in gitbash, an error is being displayed for the last line of the code, stating: throw new Error('Task requires a name that is a string'); Error: Task requires a name that is a string "use strict"; var g ...

javascriptnpmgulpgit-bash

Hiding and showing div elements using CSS, JavaScript, and PHP

Here is the current code snippet: <? while ($row1 = mysql_fetch_object($result1)) { echo '<a href="#" onclick="showhide("'.$row1->id.'");">Name</a>'; while ($row2 = mysql_fetch_object($result2)) { ...

phpjavascriptcsshtml

Experiencing the "Module not found" issue while incorporating SCSS into React applications

I attempted to apply a SCSS style to my "Logo.js" component, but I am still unable to resolve the error that keeps popping up: ERROR in ./src/components/Logo/Logo.js 5:0-19 Module not found: Error: Can't locate 'logo.scss' in '/Users/a ...

javascriptreactjssass

Border becomes dashed when dragging and dropping

I am working on enabling drag and drop functionality for users. When an item is lifted from its original position, a gray dashed box should appear in its place. As the item is moved closer to another spot, the containers adjust to create a target area (gra ...

javascriptjqueryhtmlcssjquery-ui

Is there a way to assign multiple paths to a single page within the NextJS pages directory?

I'm currently working on a project that has two different themes, and I have the ability to switch between them based on the environment. Everything works perfectly, but I'm encountering an issue with paths. Some pages should open with different ...

javascriptreactjsnext.jsnext.js13

The optimal approach for AngularJS services and promises

I have a unique setup in my AngularJS application where I utilize services to make API calls using $http and handle promises in my controllers. Here's an example of my current approach: app.service('Blog', function($http, $q) { var deferr ...

javascriptangularjsdesign-patternspromise

Unable to save data in local storage

I'm enhancing an existing chrome extension while ensuring a consistent style. I am looking to implement a new feature, and I have written a script that saves the user's selection from the popup and sets a new popup based on that choice going forw ...

javascriptgoogle-chrome-extensionlocal-storage

Personalize your Material UI ToolTip

I am currently working on customizing the material ui tooltip for React Storybook. After attempting to adjust various CSS properties such as width, height, and background color, I have not been successful in seeing these changes reflected. import * as Re ...

reactjsmaterial-uistorybook

Press the key to navigate to a different page

I have an input field for a search box. I want it so that when I enter my search query and press enter, the page navigates to another page with the value of the input included in the URL as a query string. How can I achieve this functionality? Thank you ...

javascriptnode.jsreactjstypescriptreact-router

Differences between Angular's $injector and Angular's dependency injectionAngular

As a newcomer to Angular, I am exploring the use of $injector and its get function to retrieve specific services. For instance: app.factory('$myService', function($injector) { return { ... var http = $injector.get('$http&apos ...

javascriptangularjs

Is there a way to eliminate empty arrays from my data?

I'm dealing with this PHP code snippet. public function display_children($parent,$level){ try { $cmd = $this->connection->prepare('SELECT mem,pid from mytree where pid = ?'); $cmd->execute(array($parent)); ...

javascriptphpjson

Iterating through each ID in a table/cell using .NET MVC with the @

Whenever the table is loaded, I need to run a JavaScript function on each row for cell 4. This function will format the JSON string that is inserted into it. The current code I have only updates the first row/cell... I believe the issue may be related to ...

javascript.netjsonmodel-view-controller