I am trying to use the environment variable in my component. But it works initially when i use the variable, but then it throws an error.
Component.vue
website: 'testing-hard-reality'
The code works absolutely fine when it is hardcoded, shown above. If the environment variable is used rather the hardcode i get an error
.env.local
VUE_APP_WEB_SITE: 'testing-hard-reality'
In the component the variable is used as:
website: process.env.VUE_APP_WEB_SITE
In my console i am getting the error as
[Vue warn]: Error in v-on handler: "Error: WebSite name is not set"
Please do tell me what to do.
Create in the same level of src folder a file
.env.development.local is used for working locally
.env.production.local is used for production
Add in the file your env variable
VUE_APP_MY_VARIABLE_NAME = my-value-here
VUE_APP_* part is important because all env variables in vue project needs to start with this prefix.
Now to get access on this value do:
process.env.VUE_APP_MY_VARIABLE_NAME
IMPORTANT STEP
Whenever you modify the .env files you have to stop your server and start it again in order to get the env changes.
I guess you are using vue-cli to build your vue project. In the vue-cli docs, I found the grammar of env.local would be
VUE_APP_WEB_SITE=testing-hard-reality
not your demo: VUE_APP_WEB_SITE: 'testing-hard-reality'
ref: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
Related
I'm using VueJs 3 with Vite and Cypress.
In my app I have an environment variable to define my URL:
const url = import.meta.env.VITE_URL
My goal is to replace this VITE_URL in Cypress. I've tried to create a cypress.env.json file in which I wrote:
{
"VITE_URL": "https://...",
}
but it's not working. I've also tried with CYPRESS_URL or CYPRESS_VITE_URL, but I get the same result. Any idea?
Ok, I solved it. I created a .env.testing file that I use by specifying --mode testing in the npm command that launches cypress.
This env.testing has the properties defined like:
'VITE_URL="http://..."'
If you've declared the value in a cypress.env.json file, you can reference it in code with `Cypress.env('varName');
Cypress.env('VITE_URL');
I created two components in react-native, they are working fine in my dev environment, when I use bit compile and bit status, everything remains on track, no errors. But when i use bit build or bit tag, it starts giving me error
Validation Error: Preset react-native not found.
To counter this, I have added a new env extension that is using react-native and my components are using the env extension. I have overrided the jest config and added preset there. Nothing works. Any solution to this?
I have also confirmed that components are using the env extension only.
configured tester: teambit.defender/jest (Jest # 27.5.1) I tried overriding this jest version, which I was unable to.
I got the solution, for this we have to add react-native as dev-dependecies in workspace.jsonc file. Bit does't pick from the package.json.
i'm trying to create a remote vue cli preset on github, but for some reason i keep getting a syntax error.
My preset repo: https://github.com/christoph-schaeffer/vue-preset
The command i have entered: vue create --preset christoph-schaeffer/vue-preset testProject
The Error i get:
🚀 Invoking generators...
ERROR SyntaxError: Identifier 'router' has already been declared (15:7)
SyntaxError: Identifier 'router' has already been declared (15:7)
at Object._raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:762:17)
at Object.raiseWithData (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:755:17)
at Object.raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:749:17)
at ScopeHandler.checkRedeclarationInScope (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4826:12)
at ScopeHandler.declareName (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4792:12)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:9367:22)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:865:15)
at Object.parseImportSpecifierLocal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12706:10)
at Object.maybeParseDefaultImportSpecifier (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12751:12)
at Object.parseImport (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12677:31)
At first it worked fine, then i've added several things in the preset.json along with a generator template.
After getting the error i've tried reverting the whole repo to the state it had when it was still working. However i still get that error...
I guess it's not really about the preset but instead an issue with my global babel package or something?
I'm using vue-cli version 4 and im working on a mac
Any directions on how i could get this running would be highly appreciated
I've found the issue.
First: the vue cli somehow seems to cache remote presets. That's the reason why it didn't work even after reverting changes.
The actual issue was, that the main.js shouldn't be changed like the other template files and needs special attention. For some weird reason it gives those random errors as soon as you have a main.js in your template.
If anyone is curious on how to modify your main.js in a preset check out :
https://cli.vuejs.org/dev-guide/plugin-dev.html#changing-main-file
I'm using Vue-cli V3, In my UI I need to pass an environment variable that states if I'm in test mode or not.
I know I can use .env files to define variables, but I have a problem (that is related to our Jenkins build process) that prevents me from using it.
Is there a way to access system env variables?
Yes, you access them the same way that you would inside any normal JS file.
// server.js
const port = process.env.PORT;
console.log(`Your port is ${port}`);
vue-cli only processes environment variables with VUE_APP prefix, with NODE_ENV being an exception. Use environment variables with VUE_APP_ prefix, only then it will work. If you have variable TEST make it VUE_APP_TEST.
const test = process.env.VUE_APP_TEST
console.log(test);
I was also struggling with the same problem it almost took an hour to solve this, finally found this document.
reference -
https://cli.vuejs.org/guide/mode-and-env.html#example-staging-mode
I am trying to implement raygun for a react-native app. I am running into problems with jest and I am not sure of the best approach given the window does not exist. In my package.json I have already added the following:
"globals": {
"window": {}
}
I get the following error though and I am unable to resolve it as of yet:
ReferenceError: raygunUtilityFactory is not defined
This is a very basic implementation as per the docs:
https://raygun.com/docs/languages/javascript#reactnative
I presume this is something with jest but having searched on github, here and google I still have not been able to resolve this.
Raygun4JS does not currently work correctly in a non-browser environment. Your best bet would be to not include the Raygun4JS code inside of your test environment (which is what we do at Raygun) but that is a bit more complicated using the UMD module from NPM (we use the snippet approach to inject it dynamically).
I think the problem stems from window not being considered the global object in Jest vs the browser, we have an indirect call to the window object to call the raygunUtilityFactory. Are you using the jsdom test environment? We also have the same window definition in our jestconfig.json and export some variables onto window in our setupframework.js file that are accessed indirectly through the global object and it appears to work correctly.