I am trying to hide two environment variables from an .env file but in the browser it doesn't work - dotenv

I’m trying to hide Server URL and Application ID from this tutorial: https://github.com/MoralisWeb3/youtube-tutorials/tree/main/nft-minter that is a vanilla boilerplate, using Dotenv (.env) but the browser sent me this: " require(‘dotenv’).config() Uncaught ReferenceError: require is not defined ".
I have followed all steps from https://www.npmjs.com/package/dotenv but i have
a error, help!

Related

Direct nested URL fails with error "Uncaught SyntaxError: Unexpected token '<'" - Create React App/React-router-dom/Netlify

I've got an app created with create-react-app (with react-router-dom) and deployed with Netlify. Whenever I try and route to a page through a direct (nested) URL, such as 'https://jvcparry.com/products/indie', it fails to load a page and gives the errors
Uncaught SyntaxError: Unexpected token '<' main.e3eaf229.chunk.js:1
However when I navigate the deployed version through links, everything loads fine. I also don't get this error when I'm running the app locally, which I guess means it must be something to do with deployment?
I've trawled through all the other posts I can find with this error, and also things to do with Netlify/CRA deployments. I've got a _redirects file with '/* /index.html 200' in it in my /public folder, and I've tried refactoring my routes to use code-splitting but that's made no difference.
My code is on github here: https://github.com/NatClamp/jvcparry
Deployed version is here: https://jvcparry.com/
and if you go to https://jvcparry.com/products/indie you'll see the error I'm getting.
Can anyone shed any light on this? Thanks in advance
A rigid but working solution is to update _redirects file this way:
/*/main.e3eaf229.chunk.js /main.e3eaf229.chunk.js 200
/* /index.html 200
You can also be updating this file every time you build new js bundle during your CICD run

Unable to read the environmental variable in the contect of VueJS

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

marzipano in Vue error - index.js window.bowser undefined

I'm having trouble with using Marzipano library in Vue.
I made Marzipano folder with marzipano tool and implanted in my Vue project.
But when the project is loaded, marzipano's 'index.js' file can't read below variables.
window.bowser
window.screenfull
window.APP_DATA
I get messages like this:
Uncaught TypeError: Cannot read property 'msie' of undefined
at webpack_require__
When I open the 'index.html' file from "Go Live" live server, it works perfectly. But get those error messages and get nothing when I run by vue-cli-service serve & webpack.
So I have a feeling I have to do something with webpack config setting.

Adobe analytics with vue js adding external script

Im struggling to add adobe analytics external scripts to my Vue js project. The client uses Adobe analytics and im battling to add it to the project without the project complaining.
The external adobe script looks like the following:
//assets.adobedtm.com/file.min.js with async
Then it is required that you end it by adding the following just before the closing body tag:
<script type="text/javascript">_satellite.pageBottom();</script>
When the project starts it complains in console that $ is not defined because it is defined in webpack when i start the project and im guessing its not finding the alias.
This is the error:
VM29714:3 Uncaught ReferenceError: $ is not defined
Then further down it complains that it doesnt know what _satellite is:
login:54 Uncaught ReferenceError: _satellite is not defined
I just need the scripts and satellite close to be added to the project, the rest will work once these are added.
Ive tried added the scripts by injecting them into the head tag on runtime but that also doesnt work.
If you are implementing Adobe DTM, you cannot inject the header script dynamically. It must be placed directly on the page without async or deferred attributes.
If you are implementing Adobe Launch, you can inject the header script dynamically and asynchronously. And if you do this, you do not include the footer (_satellite.pageBottom()) code.
Your script example isn't explicit, but the .min portion implies you are using Adobe Launch.
VM29714:3 Uncaught ReferenceError: $ is not defined
This is not directly related to either Adobe DTM or Launch. You may possibly have some other script or code block deployed inside the DTM or Launch interface that references $, but that's a separate issue to work out. Yes, it may be coming from a DTM or Launch script according to the js console, but keep in mind that DTM/Launch is a tag manager. It hosts and deploys other tags/scripts. So you need to do some digging to see which tag/script from which Rule references it. Start by looking at the stack trace to find out where it's coming from.

sails.js stopped to work after cloning from repository

After adding to git and cloning sails.js application back to another desktop my application stopped to work correctly. e.g. I am able to successfully run sails lift command, however when trying to load login page I see that the page is not loaded properly:
and I receive multiple errors in browser console (back end console is ok and does not drop any errors):
cloud.setup.js:13 Uncaught ReferenceError: Cloud is not defined
at cloud.setup.js:13
Uncaught ReferenceError: parasails is not defined
at ajax-button.component.js:12
ajax-form.component.js:20 Uncaught ReferenceError: parasails is not defined
at ajax-form.component.js:20
Uncaught ReferenceError: parasails is not defined
at js-timestamp.component.js:15
...
I checked node_modules folder and parasails is included there.
I didn't include node_module to my repo as I can always run npm install after cloning.
I managed to create and successfully run a new sails.js application on my desktop without any issues.
So, there must be an error with the files I pushed or didn't pushed to git.
In .gitignore file I had dependencies/ folder excluded.
That rule was excluding any file in assets/dependencies subfolder, where a number of sails.js files are located, e.g. parasails.js, etc.