Vuetify date picker not working on the production build - vue.js

I've a date picker component like this
<v-date-picker v-model="date" range landscape></v-date-picker>
and this is modeled to the date array. Which is work fine when I run the project localy.
Once I build the project in the production I got these errors
TypeError: t.split is not a function or its return value is not
iterable
TypeError: Cannot set property 'isDark' of undefined
TypeError: this.lastValue.split is not a function
TypeError: t.trim is not a function
and a warning says
Value must be a String, got Array
Any idea why this happen only in the production (npm build) and works fine in the dev (npm serve)

This problem stems from previous versions of vuetify, just upgrade to a recent version of Vuetify to fix the problem.

Related

How to locate coding error in vuejs SPA with Visual Studio Code?

I try to build a vue SPA and encounter this error
vite v2.9.15 building for production...
✓ 124 modules transformed.
[rollup-plugin-dynamic-import-variables] Assigning to rvalue (3271:44)
file: /ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/src/components/RecipeEditor.vue:3271:44
error during build:
SyntaxError: Assigning to rvalue (3271:44)
at Parser.pp$4.raise (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:19738:13)
at Parser.pp$7.toAssignable (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18231:12)
at Parser.pp$5.parseMaybeAssign (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18754:21)
at Parser.pp$5.parseParenAndDistinguishExpression (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:19209:28)
at Parser.pp$5.parseExprAtom (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:19072:41)
at Parser.pp$5.parseExprSubscripts (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18905:19)
at Parser.pp$5.parseMaybeUnary (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18871:17)
at Parser.pp$5.parseExprOps (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18798:19)
at Parser.pp$5.parseMaybeConditional (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18781:19)
at Parser.pp$5.parseMaybeAssign (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18748:19)
The builder points to line 3271 but I am pretty sure that there is not right hand variable assignation i.e. no error here.
To confirm my thinking, as it is in a rather long function that returns a value I decide to comment this function and to replace it by a very short one returning a number, like this.
function currentTemperature(time, time_step) {
return 373;
}
The program continues to compile pretty well with npm run dev
But npm run build returns the same error still pointing on the same line that is now in a comment.
My question is how to locate my error as the builder returns an invalid location ?
I am using Visual Studio Code
Thank you in advance for help.

TypeError: userAgent.toLowerCase is not a function

While running Angular-unit test, using chrome browser, ended up with the error as
TypeError: userAgent.toLowerCase is not a function
at _isAndroid (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/forms/fesm2015/forms.mjs:176:43)
at new DefaultValueAccessor (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/forms/fesm2015/forms.mjs:227:38)
at NodeInjectorFactory.factory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/forms/fesm2015/forms.mjs:254:1)
at getNodeInjectable (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/core/fesm2015/core.mjs:3565:44)
at instantiateAllDirectives (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/core/fesm2015/core.mjs:10318:27)
at createDirectivesInstances (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/core/fesm2015/core.mjs:9647:5)
at ɵɵelementStart (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/core/fesm2015/core.mjs:14561:9)
at templateFn (ng:///TodaysMarketMoversComponent.js:397:66)
at executeTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/core/fesm2015/core.mjs:9618:9)
at renderView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/#angular/core/fesm2015/core.mjs:9421:13)
Most wondering/confusing part to me- toLowerCase function has never been used through out the component/spec file.
It looks like the userAgent is being checked by the #angular/forms lib and has been deleted or not provided at all for some reason.
If it's not your code that's changing the userAgent then it's probably some third-party script.
If I were you I'd start with the latest additions in terms of libraries and dependencies and peel them back until I get a unit test running. That will give the clue.

FullCalendar Angular 13 error when importing npm library

I have an npm library which imports Angular FullCalendar v5 and everything works fine there. When i try to import my project library to another project and try access the full calendar frontend I got a warning and a message error in my browser console:
- Warning: main.js:7358 Unknown option 'default'
- Error: core.mjs:6476 ERROR TypeError: Language ID should be string or object.
at new DateTimeFormat (<anonymous>)
at buildNativeFormattingFunc (main.js:1218)
at NativeFormatter.buildFormattingFunc (main.js:1211)
at NativeFormatter.buildFormattingFunc (main.js:1009)
at NativeFormatter.format (main.js:1154)
at NativeFormatter.formatRange (main.js:1169)
at DateEnv.formatRange (main.js:3984)
at CalendarDataManager.buildTitle (main.js:6909)
at CalendarDataManager.buildTitle (main.js:1009)
at CalendarDataManager.updateData (main.js:7113)
I can't figure it out why but i know it's in this line of code at main.js (#fullcalendar/common/main.js)
Line 1218 -> var normalFormat = new Intl.DateTimeFormat(context.locale.codes, standardDateProps); The error is that the variable context.locale.codes is undefined.
Can anyone help?
I've just had the same error. Not that I was importing a project library of my own but I was importing the Fullcalendar library (from node_modules). I had enabled localization using the locale property of the calendar options but I always got this error Language ID should be string or object.
Two things was wrong:
I was importing the locale code incorrectly which resulted in this error. The current version of Fullcalendar (6.0.0) has all its locale code under #fullcalendar/core/locales.
I was using dynamic import like this: import("#fullcalendar/core/locales/da") and it worked fine but I had to access the default property of the exported object. Using async/await syntax it becomes:
const localeModule = await import("#fullcalendar/core/locales/da");
const calendar = new Calendar(someElement, {
(...),
locale: localeModule.default
});
Not directly answering your question but it sounds like you're using locale, too, and your other project is importing your project library in a way that makes the default property of the module containing the locale code undefined.

The 'graphlib' utility is a mandatory dependency

I am using joint js 3.1.1 version and graphlib 2.1.8 version.
I have a code in my app to check cyclic reference in graph. For that purpose I have written below code
graphlib.alg.findCycles(graph.toGraphLib())
This line gives following error
Uncaught Error: The the "graphlib" utility is a mandatory dependency.
at Object.toGraphLib (joint.min.js?de6d:8)
at child.He.toGraphLib (joint.min.js?de6d:8)
at RestrictCyclicConnection (links.js?2d1e:46)
at child.eval (businessobjectdesigner.vue?b25b:856)
at triggerEvents (backbone.js?ab5c:338)
at triggerApi (backbone.js?ab5c:322)
at eventsApi (backbone.js?ab5c:110)
at child.Events.trigger (backbone.js?ab5c:312)
at child.notify (joint.min.js?de6d:8)
at child._notifyConnectEvent (joint.min.js?de6d:8)
I have imported graphlib in my file also. But still getting following error.
I have imported graphlib as
import graphlib from 'graphlib'
You can try by passing graphlib as a part of the options object, as follows-
graph.toGraphLib({graphlib: graphlib})

ModalDirective causing error in Angular Universal

I have a ModalDirective from ngx-bootstrap version 1.9.3 and am using Angular 4. When a call is made to show() when code is executing on the server side (I am using Angular Universal), I am getting the following exception:
Cannot read property 'body' of undefined
TypeError: Cannot read property 'body' of undefined
at ModalDirective.checkScrollbar (ClientApp\dist\main-server.js:49156:105)
at ModalDirective.show (ClientApp\dist\main-server.js:48977:14)
at ConfirmModalComponent.show (ClientApp\dist\main-server.js:48086:27)
at SafeSubscriber._error (ClientApp\dist\main-server.js:87270:41)
at SafeSubscriber.module.exports.SafeSubscriber.__tryOrUnsub (ClientApp\dist\vendor.js:574:16)
at SafeSubscriber.module.exports.SafeSubscriber.error (ClientApp\dist\vendor.js:533:26)
at Subscriber.module.exports.Subscriber._error (ClientApp\dist\vendor.js:464:26)
at Subscriber.module.exports.Subscriber.error (ClientApp\dist\vendor.js:438:18)
at MapSubscriber.module.exports.Subscriber._error (ClientApp\dist\vendor.js:464:26)
at MapSubscriber.module.exports.Subscriber.error (ClientApp\dist\vendor.js:438:18)
Is the code not built to support Angular Universal or is there something I need to do in order to get this working?
Please update ngx-bootstrap to 2.0.0-beta.8, it supports Angular Universal.