We Keep Coding

'Object(...) is not a function' in Amplify Authenticator in vue2

I would like to use the AWS Amplify Authenticator in a js vue2 app. The manual that I used can be found here: https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-vue#recommended-usage
But I end up getting an Object(...) is not a function error.
TypeError: Object(...) is not a function
at Module.eval (index.js?2bbc:22:1)
at eval (index.js:12544:30)
at Module../node_modules/#aws-amplify/ui-vue/dist/index.js (sign-in.js:167:1)
at __webpack_require__ (app.js:859:30)
at fn (app.js:151:20)
at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/pages/auth/SignInPage.vue?vue&type=script&lang=js&:2:77)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/pages/auth/SignInPage.vue?vue&type=script&lang=js& (sign-in.js:179:1)
at __webpack_require__ (app.js:859:30)
at fn (app.js:151:20)
at eval (SignInPage.vue?0642:1:1)
The page SignInPage.vue looks like this:
<template>
<div>
<amplify-authenticator />
</div>
</template>
<script>
import '#aws-amplify/ui-vue'
import { onAuthUIStateChange } from '#aws-amplify/ui-components'
export default {
name: 'SignInPage',
created() {
this.unsubscribeAuth = onAuthUIStateChange((authState, authData) => {
this.authState = authState
this.user = authData
})
},
data() {
return {
user: undefined,
authState: undefined,
unsubscribeAuth: undefined,
}
},
beforeDestroy() {
this.unsubscribeAuth()
},
}
</script>
I tried both the example on the top of the page, as the bottom examples (migrated section), both ending up with the same error. Can anybody help me out?
Update 1:
SignInPage.vue
<template>
<div>
<authenticator />
</div>
</template>
<script>
import { Authenticator } from '#aws-amplify/ui-vue'
import '#aws-amplify/ui-vue/styles.css'
export default {
name: 'SignInPage',
components: { Authenticator },
}
</script>
package.json
"dependencies": {
"#apollo/client": "^3.3.9",
"#aws-amplify/ui-vue": "^2.3.11",
"#vue/apollo-composable": "^4.0.0-alpha.12",
"#vue/composition-api": "^1.0.0-rc.2",
"aws-amplify": "^4.3.20",
"aws-appsync": "^4.0.3",
"vue": "^2.6.11",
}

After a lot of tries the following seems to solve it, with the help of this page: https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components
Steps I have taken:
uninstall the all the aws-amplify packages
(re-)add aws-amplify #aws-amplify/ui-components packages
remove the #aws-amplify related imports from the SignIn page
add the following to the main.js
import { applyPolyfills, defineCustomElements } from '#aws-amplify/ui-components/loader';
applyPolyfills().then(() => {
defineCustomElements(window);
});
Vue.config.ignoredElements = [/amplify-\w*/];
SignInPage.vue
<template>
<div>
<amplify-authenticator />
</div>
</template>
<script>
export default {
name: 'SignInPage',
}
</script>

kendo-chart-tooltip generating script error Uncaught TypeError: background.isDark is not a function

enter image description hereI have created a kendo chart with a kendo-chart-tooltip.
Platform Angular 5
However the kendo-chart-tooltip is not working and generating a script error in the console.
zone.js:192 Uncaught TypeError: background.isDark is not a function
at Tooltip.show (base-tooltip.js:51)
at Tooltip.show (tooltip.js:24)
at Chart._displayTooltip (chart.js:1085)
at Chart._startHover (chart.js:1061)
at Chart._mouseover (chart.js:1231)
at Surface.trigger (observable.js:94)
at HTMLDivElement.eval (surface.js:135)
at ZoneDelegate.invokeTask (zone.js:421)
at Zone.runTask (zone.js:188)
at ZoneTask.invokeTask [as invoke] (zone.js:496)
Tried many ways to solve this but fails.
This is my claim-summary.component.html component.ts file template snippet
<div class="row" id="claim-summary-chart">
<div class="loading-image" *ngIf="loadingData"></div>
<div class="col-md-24">
<div class="report-sub-title">{{policyNoAndInsuredText}} <span class="pannable_msg">{{pannableMsg}}</span>
</div>
<kendo-chart [legend]="chartOptions.legend"
[seriesDefaults]="chartOptions.seriesDefaults"
[valueAxis]="chartOptions.valueAxis"
[categoryAxis]="chartOptions.categoryAxis"
[plotArea]="chartOptions.plotArea"
[pannable]="true">
<kendo-chart-tooltip>
<ng-template kendoChartSeriesTooltipTemplate let-value="value" let-series="series">
<span *ngIf="series.field.includes('Count')">{{series.name}} : {{value}}</span>
<span *ngIf="!series.field.includes('Count')">{{series.name}}
: {{intl.formatNumber(value, "c")}}</span>
</ng-template>
</kendo-chart-tooltip>
<kendo-chart-series>
<kendo-chart-series-item
*ngFor="let s of chartOptions.series"
[data]="chartData"
[name]="s.name"
[field]="s.field"
[type]="s.type"
[axis]="s.axis"
[categoryField]="chartOptions.categoryAxis.field"
[color]="s.color">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
</div>
If I remove the .. there is no script errror.
This Below is the component.ts file snippet
import {Component, OnInit, ViewChild, ViewEncapsulation} from '#angular/core';
import {DataStateChangeEvent, GridComponent, GridDataResult, RowClassArgs} from "#progress/kendo-angular-grid";
import {IntlService} from "#progress/kendo-angular-intl";
import {groupBy, orderBy, process, State} from "#progress/kendo-data-query";
import {AppConfig} from "../../shared/app-config";
import {CommUtils} from "../../shared/comm-utils";
import {DataSourceService} from "../../shared/data-source-service";
import {BarchartMode, Filter, FilterService, Report, reportList, ReportName} from "../../shared/filter-service";
import {reportOptions} from "../../shared/report-options";
import {PdfDataService} from "../pdf-export/pdf-data-service";
import {ReportParametersPanel} from "../report-parameters-panel";
const initState: State = {
skip: 0,
take: 10
};
const totalClaimIncurredSeriesTitle: String = "Total Claims Incurred ($)";
const avgClaimIncurredSeriesTitle: String = "Average Claims Incurred ($)";
let lastRowPeriod: string = null; // year period of last row
#Component({
selector: 'claim-summary',
templateUrl: './claim-summary.component.html',
styles: [`
.footerColumn {
color: #767676;
}
`],
encapsulation: ViewEncapsulation.None
})
export class ClaimSummaryReportComponent implements OnInit {
Snippet from package.json
"#progress/kendo-angular-charts": "3.9.1",
"#progress/kendo-angular-dateinputs": "2.0.0",
"#progress/kendo-angular-dialog": "3.1.2",
"#progress/kendo-angular-dropdowns": "2.0.0",
"#progress/kendo-angular-excel-export": "1.0.5",
"#progress/kendo-angular-grid": "2.1.0",
"#progress/kendo-angular-inputs": "2.0.0",
"#progress/kendo-angular-intl": "^1.4.0",
"#progress/kendo-angular-l10n": "^1.1.0",
"#progress/kendo-angular-layout": "2.0.0",
"#progress/kendo-angular-pdf-export": "1.0.2",
"#progress/kendo-angular-popup": "^2.1.0",
"#progress/kendo-data-query": "1.1.2",
"#progress/kendo-drawing": "1.4.1",
"#progress/kendo-theme-bootstrap": "2.11.0",
"#progress/kendo-ui": "2017.2.621",

I solved this problem by updating the package #progress/kendo-drawing to version 1.16.1. Old version has no method isDark

Cannot read property 'screen' of undefined when using quasar components in storybook story

I'm having an issue with rendering quasar components in the storybook with Vue and Quasar. I suspect it's not finding the quasar tags in the story. I just followed these steps to set up the project https://quasar.dev/start/vue-cli-plugin and then I ran npx sb init to set up the storybook in my app. After all, compilation works fine but when I view my story on the storybook screen I got the below error that appears. You check the screen here https://prnt.sc/1qd3ywr
I tried all possible solutions but none had worked. Any suggestions would be appreciated.
TypeError: Cannot read property 'screen' of undefined
at setup (http://localhost:6006/vendors~main.iframe.bundle.js:89474:322262)
at callWithErrorHandling (http://localhost:6006/vendors~main.iframe.bundle.js:37183:22)
at setupStatefulComponent (http://localhost:6006/vendors~main.iframe.bundle.js:44151:29)
at setupComponent (http://localhost:6006/vendors~main.iframe.bundle.js:44107:11)
at mountComponent (http://localhost:6006/vendors~main.iframe.bundle.js:42108:13)
at processComponent (http://localhost:6006/vendors~main.iframe.bundle.js:42083:17)
at patch (http://localhost:6006/vendors~main.iframe.bundle.js:41698:21)
at componentEffect (http://localhost:6006/vendors~main.iframe.bundle.js:42220:21)
at reactiveEffect (http://localhost:6006/vendors~main.iframe.bundle.js:36022:24)
at effect (http://localhost:6006/vendors~main.iframe.bundle.js:35997:9)
Here is my story for the quasar component: (quasar.stories.js)
import { QLayout, QPageContainer, QPage, QSelect, QBtn } from 'quasar'
export default {
title: 'Quasar'
}
export const Components = () => ({
title: 'QuasarComponents',
components: { QLayout, QPageContainer, QPage, QSelect, QBtn },
template: `<q-layout>
<q-page-container>
<q-page class="full-height full-width justify-center items-center q-pa-xl">
<div class="col-auto">
<q-input v-model="name" label="Full name" />
<q-select v-model="role" :options="options" label="User Role" />
</div>
</q-page>
</q-page-container>
</q-layout>`,
data () {
return {
name: null,
role: 'User',
options: ['Admin', 'Supervisor', 'User']
}
}
})
main.js
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials"
]
}
preview.js
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}

This looks like GitHub issue #7263, which is caused by an app extension.
One user discovered a solution:
em-qui is an app-extension that was also declaring quasar as a devDependency (for IDE support...), though on the same version this was somehow causing a confict:
{
"devDependencies": {
"graphql-tag": "^2.10.3",
"quasar": "^1.12.6"
},
}
So I had to separate the two by declaring it in peerDependencies in the app extension:
{
"devDependencies": {
"graphql-tag": "^2.10.3"
},
"peerDependencies": {
"quasar": "^1.12.6"
}
}
and the error went away.

Billboard.js: $$.generatePoint is not a function

I'm trying to use billboard.js as a simple alternative to d3.js for displaying some line graphs. Unfortunately, I can't seem to get it working in my own repository, nor can I get it working in a vanilla Vue project.
Can anyone tell me if something special is required to get billboard.js up and running in combination with Vue?
My App.vue:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<div id="chart">
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { bb } from 'billboard.js';
#Component
export default class App extends Vue {
mounted() {
console.log(this);
console.log(bb);
bb.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 170, 150, 250],
],
types: {
data1: 'line',
data2: 'area-spline',
},
colors: {
data1: 'red',
data2: 'green',
},
},
});
}
}
</script>
And the error code I get from my devtools:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: $$.generatePoint is not a function"
found in
---> <App> at src/App.vue
<Root>
For what it's worth, I am using the following npm versions for this project:
"dependencies": {
"billboard.js": "^2.0.3",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2"
},
I've created a small repository with the minimum code required to reproduce this issue.

Based on the docs, the correct usage for the ESM build is:
// BEFORE:
//import { bb } from 'billboard.js';
// AFTER:
import bb, { line, areaSpline } from 'billboard.js';
export default {
mounted() {
bb.generate({
//...
data: {
types: {
// BEFORE:
//data1: 'line',
//data2: 'area-spline',
// AFTER:
data1: line(),
data2: areaSpline(),
},
}
});
}
}
Also, if you intend to have multiple instances of this chart component on a page, you should pass unique references to the chart's parent element via a ref:
<template>
<!-- BEFORE: -->
<!-- <div id="chart" /> -->
<!-- AFTER: -->
<div ref="chart" />
</template>
<script>
export default {
async mounted() {
// wait til next tick for `ref` to be available below
await this.$nextTick();
bb.generate({
//...
bindto: this.$refs.chart,
});
}
}
</script>
GitHub PR with fixes

Vuejs v-for error remove element firebase

<tr v-for="(unfilm) in film" v-bind:key="unfilm.key">
<td>
<div id="titolo">{{unfilm.titolo}}</div>
</td>
<td>
<img :src="unfilm.locandina" style="max-width: 50px;">
</td>
<i #click="cancellaFilm(unfilm)" class="material-icons deep-orange-text text-darken-4"
style="cursor: pointer;">delete</i></td>
cancellaFilm(unfilm) {
gamesRef.child(unfilm['.key']).remove()
this.$toastr.info('Errore', 'Attenzione');
// this.$alert("Film cancellato")
}
}
When i clicked button "cancellaFilm" , returned error like:
[Vue warn]: Error in v-on handler: "Error: Reference.child failed: First argument was an invalid path = "undefined".
Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]""
In Cdn mode it works in mpm mode it does not work. I tried to test the problem seems to be due to the macacato passage of the "unfilm" object
What should I modify?
below list the versions of the used packages:
"bootstrap-vue": "^2.13.0",
"core-js": "^3.6.4",
"firebase": "^7.14.2",
"jquery": "^3.4.1",
"ngx-toastr": "^12.0.1",
"popper.js": "^1.16.1",
"toastr": "^2.1.4",
"vue": "^2.6.11",
"vue-simple-alert": "^1.1.1",
"vue-toastr-2": "0.0.10",
"vuefire": "^2.2.2"

In your cancellaFilm() function, unfilm['.key'] is undefined.
Do
gamesRef.child(unfilm['key']).remove()
instead.

I insert the remaining data code:
import {gamesRef} from './firebase'
export default {
firebase: {
film: gamesRef,
}
In firebase.js
import Firebase from 'firebase/app'
import 'firebase/database'
const app = Firebase.initializeApp({
//configuration data
})
export var db = app.database();
export var gamesRef = db.ref('altro')
add_film() {
gamesRef.push(this.nuovoFilm);
}
Is the problem due to the vu js version or the firebase version? What should I change? can you make an example or fix the code?
Thanks a lot