Unfortunately, it's a pretty simple question, but I can't find the answer.
Don't have an access to environment variables in some file.
I use create-react-app (^16.11.0)
file .env in the root folder near package.json
variable declared as REACT_APP_API=http://localhost:4000
call variable as process.env.REACT_APP_API
the server has been restarted many times
I have an access to the variable in some folder but in another don't.
below link to files structure
workflow structure
Thanks a lot!
THE PROBLEM WAS FOUND!
As often happens, the reason is funny.
When typing process.env.REACT_APP_API, my IDE automaticlly added an import at the top of the file
import process from "process";
That's why i can't access to process.env. in one specific file.
Import removed, problem solved
Related
I'm upgrading a React application and have found that I need to modify the import statements to get them to work.
For example, in the old version, the following import works without errors:
import { User } from '../System'
Note that System is a directory on my file system that contains User, a js file that ends with export default User.
In my upgraded version of the app, the System directory still exists, but the above import gives me Can't resolve '../System' in 'C:\my app\.
It turns out that to get the import working properly now, I need to change it to the following:
import User from '../System/User';
If I understand correctly, this relates to js module system changes made with ES6.
My question, though, is regarding the specification of a directory in the import statement (System above). Why would it be that I was previously able to name a file directory in the import statement instead of the actual js script/module itself? Is that approach of using a directory in the import statement still possible? And if so, is it ever advisable?
Update: based on AKX's comment, I noticed the System directory does indeed contain an index.js, which apparently is what makes the import from the directory itself possible.
When an import points to a directory, and only a file, Webpack (which most React setups use) follows Node's's conventions and will attempt to import index.js from that directory if it exists. That's the only condition under which importing from a path that points to a directory works - your previous build probably had /System/index.js (which would allow importing with from '../System'). If you rename the file you're importing to anything else - such as to User.js - importing using only the directory path will fail.
And if so, is it ever advisable?
Sure, if you want. It's a style choice but is commonly done.
I have a folder that contains another folder and a file "server.js", the file is the node file and the folder contains HTML and client.js. server.js has a variable that holds the port for the website, and I want to access that variable to use it in the client.js, but it keeps erroring, I tried using import statement in the client.js but it gives "Uncaught SyntaxError: Cannot use import statement outside a module". I tried using require("server.js") but learned that client-side js doesn't support require() function. I searched and found that there's a library called RequireJS, while there are some tutorials to use it, they all use the same example and it always gives the same error no matter how much I changed the code, so please help me with a detailed tutorial on how to use RequireJS.
So I have an Angular library with a service installed on my main project and I want to know if it's possible to retrieve a global url variable or a field of my config.json file I defined in my main project. Would be nice to know how too.
In the src/environments/ folder you can have an environment.ts file with settings variables and use it with
import { environment } from './../environments/environment';
Then any variable you have in the file will be available.
You can even have different files for each of your environments.
https://angular.io/guide/build
I tried running expo from a file other than App.js but anytime i tried, the default App.js was executed instead of the secondary file.
Take a look at your package.json. Inside the config object you'll find the ''main'' key, that's the key responsible for saying what the first file to run is!
Usually you'll find another path that leads to node_modules/expo/AppEntry.js (see, it's expo, not node_modules/#expo).
Inside node_modules/expo/AppEntry.js you'll see an import like this: import App from '../../App';
That's where you can choose any other file to be the first to run!
More info at https://docs.expo.io/versions/latest/sdk/register-root-component/
Using Gatsby with Ghost CMS requires a .ghost.json file containing my API keys. I'd like to push the repo to Github and don't want my keys in my repository. Hence the question: is it possible to use .env variables within json files?
By default, Gatsby looks for .env variables inside .env.development (or .env.production) when you exposes the:
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
Of course, you can change this behavior. If you want to keep your variables inside a .json file without pushing it, just add them to .gitignore and import them in the files you need (gatsby-config.js or whatever) using a require function. Using, for example: require('../../ghost.json').
So, I would recommend using the default configuration to avoid possible issues. You can keep your file pushed without API keys and move them to the .env local file and simply load the where you need by: process.env.YOUR_API_KEY_VARIABLE
For further information: https://www.gatsbyjs.org/docs/environment-variables/