vue3-google-map: Uncaught ReferenceError - javascript

I'm building vue3 app using the Quasar platform. I'm adding page that shows google maps using vue3-google-map. I've followed the docs "Your first map". And it appears to be working...
However, In the console i see this error: "Uncaught ReferenceError: exports is not defined at vue3-google-map:16:36"
The error occurs immediately ... before vite loads my project.
My index.html file is shown below. Do I have the script code in the correct location? If not, where should it be placed?
Any suggestions as to how fix this error?
<html>
<head>
<title><%= productName %></title>
<meta charset="utf-8">
<meta name="description" content="<%= productDescription %>">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
<link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="icon" type="image/ico" href="favicon.ico">
<script src="https://unpkg.com/vue3-google-map"></script>
</head>
<body>
<!-- quasar:entry-point -->
</body>
</html>

Related

Is there a way I can get my site's favicon updated for Safari (both desktop & mobile)?

I've been working on a project using SvelteKit and I have yet to figure out why my favicon is not showing up correctly on Safari (both desktop & mobile). Instead, it's actually picking up the favicon from a site I have linked on my footer! This is what's in the head of my app.html file:
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover">
<meta property="og:title" content="Movie Hunt" />
<meta property="og:image" content="https://i.imgur.com/QzdVah9.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:description" content="Browse through genres of movies or search for a particular movie title and find out if they are available for rent or currently being streamed online."/>
<meta property="og:url" content="https://movie-hunt-demo.vercel.app/" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:type" content="website"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Londrina+Shadow&family=Overpass:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Yellowtail&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4dd3342d23.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="%sveltekit.assets%/styles/global.css" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico?v=2">
<link rel="shortcut icon" sizes="32x32" href="/images/favicon-32x32.png?v=2" />
<link rel="shortcut icon" sizes="16x16" href="/images/favicon-16x16.png?v=2" />
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png?v=2">
<link rel="mask-icon" href="/images/favicon.ico?v=2" color="#000000">
<link rel="android-chrome" sizes="192x192" href="%sveltekit.assets%/images/android-chrome-192x192.png">
<title>Movie Hunt</title>
%sveltekit.head%
</head>
This is on my footer and where I'm assuming my project is picking up the yellow favicon somehow:
<a class="coffee_a" href="https://www.buymeacoffee.com/rickydlgd" target="_blank" rel="noreferrer"><i class="fa-solid fa-mug-hot"></i></a>
It's really strange. The correct favicon does show up on other browsers as I've tested the site on chrome, firefox, and brave so far. Safari is the only one picking up the yellow favicon from buymeacoffee.
Any idea how I can fix this?
Here's a link to my project: Movie Hunt
Below is a screenshot of what I've been seeing:
Safari has suddenly updated the favicon to the correct one and I didn't change any of the code... I guess it takes a couple days for it to update? Anyway, just leaving this here in case anyone runs into this issue. Waiting a couple days was the answer.

How to load external iframe?

I am using pdf js express viewer to work with pdf's
https://pdfjs.express/
When I download their example everything is working fine. But I have older project where I try to integrate this depndency and I am having error
Refused to load the script 'http://localhost:65534/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
I don't understand why I get this error due to CSP.
So it seems that internally there is a problem for my application to load pdf js express ( on other project samples it is not a problem I don't get this error )
My index html file looks like this
<html data-ng-app="xecm-webapp" ng-controller="MainCtrl" class="no-js" manifest="offline.manifest">
<head>
<meta charset="utf-8">
<title>App</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width">
link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="bower_components/angular-carousel/dist/angular-carousel.css"/>
<link rel="stylesheet" href="bower_components/perfect-scrollbar/src/perfect-scrollbar.css"/>
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.css"/>
<link rel="stylesheet" href="bower_components/xcomponent-widgets/css/object-display-storyline/object-display-storyline.css" />
<!-- build:css styles/xecm-webapp-styles.css -->
<link rel="stylesheet" type="text/css" href="css/t2i-bootstrap/t2i-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/extend-bootstrap.v4.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/flex-utils.css"/>
<link rel="stylesheet" href="css/styles/main.css"/>
<link rel="stylesheet" href="css/styles/spinner-custom.css"/>
<link rel="stylesheet" href="css/components/application-manage/application-manage.css"/>
<script src="components/application-manage/application-manage-directive.js"></script>
<script src="components/application-manage/application-manage-label.js"></script>
<script type="text/javascript" src="bower_components/xcomponent-widgets/TimelineJS/build/js/storyjs-embed.js"></script>
<script type="text/javascript" src="./components.js"></script>
<script type="text/javascript" src='./scripts/lib/lib/webviewer.min.js'></script>
</head>
</html>
I tried adding this inside my head under other meta tags
<meta http-equiv="Content-Security-Policy" content="script-src http://localhost:65534 'unsafe-eval';">
but I have same error. What should I do and why I am getting this error ?

ERR_FILE_NOT_FOUND in console but the app works correctly

In my app I get error message in console
GET chrome-extension://lncjpblllfcpljbdelleomhnlgdlhhmm/content/styles.css net::ERR_FILE_NOT_FOUND
after every new request, but in the same time I do not see any other issues and application seems to be running correctly. Currently I cannot look up any line in my code files where the styles.css file is mentioned (only App.css and all.css).
Why cannot this file be found and how can I fix it?
Here is an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Welcome to DevConnector!</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

Webview tag not working for my chrome app

So I have been trying to load google in my app using this:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Webview</title>
<meta name="description" content="">
<meta name="author" content="Kitanga Nday">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="image/png" sizes="16x16" href="favicon.png">
<script src="kng.js"></script>
</head>
<body>
<div id="kontainer"> <!-- Kontainer div -->
<webview src="https://www.google.com/" width="640" height="480"></webview>
</div>
</div>
</body>
I then tried sandboxing the page and running it in the main html file using the iframe tag still nothing.
Maybe you missed the fact that using <webview> requires a "webview" permission in the manifest.

BitWasp doesn't load CSS and Js

I have just installed bitwasp and now i ran into this problem with a php generated html file, it doesnt load the CSS and the javascript because its pointed to the index.php.
Is there some fix in Php or need i to change my Apache server settings
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="open source bitcoin marketplace" />
<title>Welcome | BitWasp</title>
<link rel="stylesheet" type="text/css" href="http://10.0.0.12/BitWasp/index.php/assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://10.0.0.12/BitWasp/index.php/assets/css/style.css">
<!-- JavaScript -->
<script src="http://10.0.0.12/BitWasp/index.php/assets/js/jquery-1.8.1.min.js"></script>
<script src="http://10.0.0.12/BitWasp/index.php/assets/js/bootstrap.js"></script>
</head>
Thanks in advance

Categories