Uncaught TypeError: at.a is undefined - express

I have a Vue 2 web app that uses AWS Amplify. I have another app almost exactly like it in every way and it works fine, but for some reason I cannot get this one to work in production.
Locally in dev, everything works just fine.
When I build and launch it with Express, it doesn't load the website. Only when I remove "Amplify.configure(awsconfig);" from src/main.js does it load, but, of course, none of the AWS related functionality (API calls) work.
I get the following error on the console:
Uncaught TypeError: at.a is undefined
56d7 main.js:12
Webpack 6
At main.js line 12 is "Amplify.configure(awsconfig);"
/* eslint-disable */
import Vue from "vue";
import App from "./App.vue";
import router from "./router.js";
import Amplify from "aws-amplify";
// Material plugins
import MaterialKit from "./plugins/material-kit";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);
Vue.config.productionTip = false;
Vue.use(MaterialKit);
new Vue({
router,
render: h => h(App)
}).$mount("#app");
The site is very simple and is set up just like my other one that works, so this is very confusing.
Any idea what the issue could be? Let me know if you need any other code snippets.

Where I import Amplify at the top, it shouldn't be
import Amplify from "aws-amplify";
but instead
import { Amplify } from "aws-amplify";
This is strange because my other project does the first version and works fine.

Related

I am trying to set up a enquiry form on my vue-bootstrap application but am getting this error when I try to run it

I am trying to set up my vue application so customers can send emails to a address. My application was working fine but when I installed the firebase, send grid and node mailer packages, this error gets displayed
error in external "https://smtpjs.com/v3/smtp.js?vue&type=script&lang=js&"
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
ERROR in external "https://smtpjs.com/v3/smtp.js?vue&type=script&lang=js&"
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
# ./src/views/Home.vue 2:0-75 3:0-70 3:0-70 10:2-8
# ./src/router/index.js 3:0-37 17:13-17
# ./src/main.js 4:0-30 12:2-8
my main.js file
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
I have ran some test emails and they seem to be sending fine, but I can't deploy my application now.
I believe you should convert your dynamic imports to static like converting this:
Import ... from moduleName();
To this
import ... from 'moduleName':

How to mount two seperate applications inside one Vue project?

I am creating a frontend and a backend application inside one Vue 3 project. Everything works fine except that app.js is throwing following error, depending on which component is visited in the browser.
I you visit the app.vue:
[Vue warn]: Failed to mount app: mount target selector "#cms" returned null.
and if you visit the cms.vue:
[Vue warn]: Failed to mount app: mount target selector "#app" returned null.
The mounting file app.js looks like this:
require('./bootstrap');
import {createApp} from 'vue';
import app from "../vue/app";
import cms from "../vue/cms";
import router from "./router";
createApp(app)
.use(router)
.mount("#app");
createApp(cms)
.use(router)
.mount("#cms");
Is there any way I can prevent the browser warning?
You could query the document for those elements, and only mount the ones that exist:
const appEl = document.querySelector('#app');
if (appEl) {
createApp(app).use(router).mount(appEl);
}
const cmsEl = document.querySelector('#cms');
if (cmsEl) {
createApp(cms).use(router).mount(cmsEl);
}

[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance

Case and problem
I´m working on a private project with Vue.js and have the following error, which occurs when I´m trying to use the FileUpload component of PrimeVue:
[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.
Trying to use FileUpload in my component:
<template>
<FileUpload name="demo[]" url="" #upload="onUpload" :multiple="true" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
</template>
The error only occurs, when I try to use FileUpload, if I remove it, the component works. FileUpload and PrimeVue are imported like they should, in the main.js:
import {createApp} from 'vue'
import router from "./router";
import store from "./store";
import PrimeVue from "primevue/config";
import PrimeIcons from "primevue/config";
import App from "./App";
const app = createApp(App);
app.use(
router,
PrimeVue,
PrimeIcons,
store
)
import 'primevue/resources/primevue.min.css'
import 'primeflex/primeflex.css'
import 'primeicons/primeicons.css'
import 'primevue/resources/themes/bootstrap4-dark-purple/theme.css'
import Card from "primevue/card";
import Menubar from "primevue/menubar";
import FileUpload from "primevue/fileupload";
app.component('Card', Card)
app.component('Menubar', Menubar)
app.component('FileUpload', FileUpload)
app.mount('#app')
What I tried so far
I searched this issue, but the only exact match for this error is an old closed issue on GitHub regarding the Calendar component: Issue #808. The error in this issue was caused because of the breaking change with the new PrimeVue API. This should not be my case, because it was introduced with V3.1 and I´m using V3.7.
In case the version is the problem I tested different versions of PrimeVue, like 3.1, 3.2, 3.3 but the error still shows. Thats why the actual dependencie is still the latest:
"primevue": "^3.7.0"
Maybe there is an already existing solution on SO or Google, but either my english is to bad to understand or I´m still to fresh at Vue.js to comprehend the problem.
Thanks in advance!
Your usage of app.use() is incorrect:
app.use(
router,
PrimeVue,
PrimeIcons,
store
)
app.use() takes only two arguments:
first argument: the Vue plugin
second argument: the plugin options
Also, PrimeIcons is not a plugin, so that should not be passed to app.use().
Solution
Pass each plugin individually to app.use():
app.use(router)
.use(PrimeVue)
//.use(PrimeIcons) // not a plugin
.use(store)

Vue.js 3 telepone field with country code input

Anyone know a way to insert a telephone field with a country code dropdown similar to the one in the link for vue3?
https://www.npmjs.com/package/vue-tel-input
I had tried to use the package in the link but it throws the following error in console.
Uncaught (in promise) TypeError: selfHook.bind is not a function
attempted implementation:
main.js
import { createApp } from 'vue'
import VueTelInput from 'vue-tel-input'
const app = createApp(App);
app.use(VueTelInput)
app.mount('#app');
in the App.vue I just imported it like a component using the following code:
<vue-tel-input></vue-tel-input>
Someone posted on an open issue regarding Vue3 support for the library that they have created a Vue3 version of it: https://github.com/victorybiz/vue3-tel-input
I have tried it and it seems to work fine!
This library supports Vue 3 now. https://iamstevendao.github.io/vue-tel-input/documentation/next.html
npm install vue-tel-input#next
import { createApp } from 'vue';
import App from './App.vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/dist/vue-tel-input.css';
const app = createApp(App);
app.use(VueTelInput);
app.mount('#app');
...
<template>
<vue-tel-input v-model="phone"></vue-tel-input>
></template>

How to use Recaptcha v3 with VueJS using uve-recaptcha-v3 when I get a vue_1.ref is not a function error?

I am using vue-recaptcha-v3 in a VueJS app but am immediately getting an error. My main.js looks like this:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import { VueReCaptcha } from 'vue-recaptcha-v3'
Vue.use(VueReCaptcha, { siteKey: 'MYSITEKEY' })
Vue.use(Buefy)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Unfortunately when I hit save I get the error below (screenshot included):
Uncaught TypeError: vue_1.ref is not a function
which relates to the following piece of the vue-recaptcha-v3 package:
exports.VueReCaptcha = {
install: function (app, options) {
var isLoaded = vue_1.ref(false);
var instance = vue_1.ref(undefined);
Not sure where to go from here...
I have had the same issue, it seems the most recent package version has this obvious runtime error. However version 1.9.0 works great. So just remove the current package if you use yarn run the following (otherwise the npm equivalent):
yarn add vue-recaptcha-v3#1.9.0
vue-recaptcha-v3 master branch is now using Vue 3.
You're probably using Vue 2, so you should follow the instructions here.
If the type of the package does not influence much what you need. here's one that i use and that works for me.
Link: https://www.npmjs.com/package/vue-recaptcha
After installing you just need to import it into your form.
import VueRecaptcha from 'vue-recaptcha';
Using:
<vue-recaptcha
#expired="captchar = false"
class="mr-8"
#render="cargarCaptchar = true"
#error="captchar = false"
#verify="captchar = true"
sitekey="your code"/>
If that doesn't work, add the following tag to the page header:
<script src = "https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" defer> </script>
If you find that this is not feasible for your project. No problem, as I still think you can help other fellow beginners.