How to read environment variables - vue.js

env file is in root directory. I run my server with npm run dev
.env
STRIPE_KEY=1234
When trying to use it in a js file
const API_KEY = process.env.STRIPE_KEY
Im getting following error:
Cannot read properties of undefined (reading 'STRIPE_KEY')

Related

Local npm module cannot be found

In a React Boilerplate project, I am trying to use a local module, but getting:
ERROR in ./node_modules/react-sortable-tree-theme-file-explorer/dist/main.js
Module build failed: Error: ENOENT: no such file or directory, open '/Users/username/Documents/project/node_modules/react-sortable-tree-theme-file-explorer/dist/main.js'
Both paths do exist:
$ ls node_modules/react-sortable-tree-theme-file-explorer/dist/main.js
node_modules/react-sortable-tree-theme-file-explorer/dist/main.js
and
$ ls /Users/username/Documents/project/node_modules/react-sortable-tree-theme-file-explorer/dist/main.js
/Users/username/Documents/project/node_modules/react-sortable-tree-theme-file-explorer/dist/main.js
...so I can't figure out what the complaint is. The paths and files DO EXIST. I used npm link initially, but that never worked, and so I also tried npm install ../react-sortable-tree-theme-file-explorer but it gives the exact same results.
I am importing the package as in:
import FileExplorerThemeBase from "react-sortable-tree-theme-file-explorer";

Vue CLI 3 doesn't create .vuerc file

I'm using Vue CLI 3.5.1 on Ubuntu 16.04 to create some test projects. As per the doc, I should have a .vuerc file created in my Home directory. However, when I run:
vue create test-project
no such file is created. Projects work fine but running vue config gives the following error:
lundincast#lundincast:~/Vuejs-projects/test-app$ vue config
ERROR
Error: ENOENT: no such file or directory, open /home/lundincast/.vuerc > Error: ENOENT: no such file or directory,
open '/home/lundincast/.vuerc'
I've tried with several option (saving preset or not, etc...) to no avail. Why isn't that config file created?
.vuerc files are only created after you have asked vue cli to save a preset for you at the end of the vue create process prompts
The file is stored in your user directory and can be edited with vue config --edit
After running:
vue create hello-world
.vuerc file will be created in your user root diretory

environment variables not visible in production

I've built a Vue CLI project with an .env.development.local and .env.production.local file.
When I run npm run serve it loads the variables fine. When I run npm run build and serve the dist directory, it doesn't load the variables.
I've made sure the variables are prefixed with 'VUE_APP_' and when I console.log process.env I get just {NODE_ENV: "production", BASE_URL: "/"}
How can I get the environment variables to be read in production?
Edit: I've included one of my .env files as an example:
NODE_ENV=production
VUE_APP_API_URL=http://10.0.0.28:4323/api
VUE_APP_HOME_URL=http://localhost:9098

npm config list - multiple config

i have created a project using npm init and i created a .npmrc file with some config. when i check the npm config list i am getting project config and userconfig.
do i need to remove the userconfig , but i am not able to edit the file.
i am not understanding why we need the .npmrc file , when you hit a command npm install express , all the config is done in the npm config file ?
how to edit the .npmrc global file in ubuntu ?
do we need to remove the userconfig if we need to use project config ? or its something like which ever comes it takes that
By Searching , i found some infos
when you install npm you have a global config file, whenever you need to access the global config file you can just add -g command
example : npm config list -g
for every projects you can create a .npmrc file, in that file you can configure and you will have private kind of stuff like the packages which are hosted private
so for that you need to create a .npmrc file , if you check npm config list you will have both configs (.npmrc in project folder) and (.npmrc in global)
so its like first it will check with the config in the project folder, if there is no config for project folder it will check for the global config(userconfig)
no need to remove the global config , it will take first comes first serve so the project folder config will be taken if its there otherwise only it will check for the global config
Editing the Global config file
you can edit the global config file by going to
cd /
cd home/"username"/
vi .npmrc
change the file save it by using press esc type :x

Vue-router. Error in the browser console after using "npm update" command. Error: Module build failed: Error: ENOENT: no such file or directory

Before updating project was working.
After updating with "npm update" command, browser console shows:
Error: Module build failed: Error: ENOENT: no such file or directory,
open
'C:\xampp\htdocs\beauty\node_modules\vue-router\dist\vue-router.esm.js'
In my bootstap file I add Vue-router like thiss
import VueRouter from 'vue-router';
window.Vue.use(VueRouter);
I don't understand where is problem and what should i do?
In my case, I had to restart the dev server since I've switched to a branch that had TypeScript introduced while started dev server on another (feature branch) that added vue-router but didn't have TS. I've merged and was puzzled why I got this error until I've realised that dev server probably doesn't recognize TS at all (depending on switching main.js to .ts and back I had the same or different error).