Vaadin 23 TypeError: error loading dynamically imported module - vaadin

In Firefox browser, not always (but very often) I see the following error in the console (and page is unable to load):
TypeError: error loading dynamically imported module
Only after Ctrl + F5 the page is loaded correctly.
Also in the Network tab I may see the following:
Uncaught (in promise) TypeError: error loading dynamically imported module router.js:525:10
ready router.js:525
(Async: promise callback)
render router.js:517
__onNavigationEvent router.js:932
setRoutes router.js:419
index.ts:32
There is no any other information. In Chrome, everything works fine. What may be the reason of this issue?
I noticed this after upgrade to Vaadin 23.2.1
Also, from time to time I have the following error:

Related

For what reason can an error occur periodically in the client-side?

I have a Rails application that has several components written in Vue. All components are included in the "pack" file.
These two errors occur periodically in the browser (Safari):
SyntaxError: Unexpected token '|'
TypeError: Object(i.a) is not a function. (In 'Object(i.a)()', 'Object(i.a)' is an instance of Object)
The first error points to this line:
<meta name="csrf-token" content="qRbwC3xngly9Y5hRVLA86upHTEkVwIk10PiOtDWCw00RUkIhGK8UvEIhtUXebkzWaqlxsHPSBaheR1moaY-b9w"/>
I don't understand what the second line points to. The error refers to some function "c" in "node.js:15".
Clicking on it jumps to the comment:
In general, I do not understand what it is.
If reload the page, then everything will be fine. Well, that is the problem occurs randomly.
On the Sentry side, I get nothing. Apparently, this does not reach Sentry, the error is not caught and is not transmitted to Sentry.

Highcharts more and highcharts guage issue

My high charts more is giving the following erro:
highcharts-more.js:29 Uncaught TypeError: I is not a function
I am calling the highcharts-more on the page with the folllowing:
https://code.highcharts.com/highcharts-more.js
I see that the highcharts-more file has been updated today. If I use the older version which is:
https://code.highcharts.com/4.2.2/highcharts-more.js
Then I start getting error in the solid-guage.js which is as follows:
solid-gauge.js:12 Uncaught TypeError: t is not a function
Plus the gayge fill color is not functioning properly as well.
Updating my local file highcharts.js to latest version solved the issue as, highcharts-more and solid-guage being called from website were updated to new versions along with highcharts.js.

Code from dart2js is throwing NoSuchMethodErrors for get$functions

My Polymer.dart web app, that works fine in Dartium, is giving the following error (it repeats seven times) when compiled with dart2js using pub build --mode=debug and loaded in Chrome.
Resource interpreted as Script but transferred with MIME type text/plain: "http://confab.dev/index.html_bootstrap.dart". confab.dev/:10
warning: file:///home/dan/projects/confabulous/webatara/web/index.html.0.dart library not found index.html_bootstrap.dart.js:17188
Uncaught Error: NoSuchMethodError: Cannot call "get$functions" on "#<JsLibraryMirror>" (Object #<JsLibraryMirror> has no method 'get$functions') index.html_bootstrap.dart.js:17188
Stack Trace:
TypeError: Object #<JsLibraryMirror> has no method 'get$functions'
at dart._loadLibrary (http://confab.dev/index.html_bootstrap.dart.js:20000:19)
at dart._loadLibraries (http://confab.dev/index.html_bootstrap.dart.js:19917:11)
at dart._initPolymerOptimized (http://confab.dev/index.html_bootstrap.dart.js:19908:7)
at dart.initPolymer (http://confab.dev/index.html_bootstrap.dart.js:19902:7)
at main (http://confab.dev/index.html_bootstrap.dart.js:4112:7)
at _IsolateContext.eval$1 (http://confab.dev/index.html_bootstrap.dart.js:1369:23)
at dart.startRootIsolate (http://confab.dev/index.html_bootstrap.dart.js:1145:21)
at http://confab.dev/index.html_bootstrap.dart.js:26514:7
at init.currentScript (http://confab.dev/index.html_bootstrap.dart.js:26494:5)
at http://confab.dev/index.html_bootstrap.dart.js:26508:3
index.html_bootstrap.dart.js:17188
Uncaught NoSuchMethodError: Cannot call "get$functions" on "#<JsLibraryMirror>" (Object #<JsLibraryMirror> has no method 'get$functions') index.html_bootstrap.dart.js:2369
Because source maps don't appear to work (they're turned on in Chrome, and I have .map files), I don't even know which part of my code is causing this.
I've tried with interop.js included both before dart.js, as the docs say, and after, as this issue says.
Looks like a bug in dart2js. Please file an issue, ideally with a reproducible test-case.
pub upgrade fixed it. It turns out that something had replaced the polymer 0.9.5 that I'd been using with 0.8.10+4. Quite odd. The solution to this is to set the polymer version as '>= 0.9.5' instead of 'any', which I will do eventually, but for now I'm interested to see if it happens again.

Console error with example of ui.bootstrap.datepicker

I try to use angular-ui-bootstrap datepicker and it upset me for a while with an error on firebug console (Firefox 21) saying
Error: array is undefined
indexOf#http://localhost:9000/components/angular/angular.js:526
arrayRemove#http://localhost:9000/components/angular/angular.js:535
JQLiteUnbind#http://localhost:9000/components/angular/angular.js:1630
JQLite.prototype[name]#http://localhost:9000/components/angular/angular.js:2203
.link/<#http://localhost:9000/components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.min.js:1
Scope.prototype.$digest#http://localhost:9000/components/angular/angular.js:7942
Scope.prototype.$apply#http://localhost:9000/components/angular/angular.js:8143
done#http://localhost:9000/components/angular/angular.js:9170
completeRequest#http://localhost:9000/components/angular/angular.js:9333
createHttpBackend/</xhr.onreadystatechange#http://localhost:9000/components/angular/angular.js:9304
http://localhost:9000/components/angular/angular.js
Line 5754
After I check every datepicker settings I check the given example in documentation, followed the link "edit it on plunker" and I got a similar error.
Error: array is undefined
indexOf#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:510
arrayRemove#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:519
JQLiteUnbind#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:1596
JQLite.prototype[name]#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:2149
.link/<#http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js:1229
Scope.prototype.$digest#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:7878
Scope.prototype.$apply#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:8079
bootstrap/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:962
invoke#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:2843
bootstrap#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:961
angularInit#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:936
#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:14729
trigger#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:1723
createEventHandler/eventHandler/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:1958
forEach#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:133
createEventHandler/eventHandler#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:1957
http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js
Line 5687
Then I try Chrome Version 26.0.1410.63 and I got a different error
TypeError: Cannot read property 'indexOf' of undefined
at indexOf (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:510:12)
at arrayRemove (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:519:15)
at JQLiteUnbind (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:1596:7)
at Object.JQLite.(anonymous function) [as unbind] (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:2149:17)
at Object.fn (http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js:1229:21)
at Object.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:7878:27)
at Object.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:8079:24)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:962:13
at Object.invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:2843:25)
at bootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:960:12)
It works but the error message upset me a lot and I thought that was something wrong with my code.
Can I assume this is not related with example given but with some internals or is the example missing something?
ui-bootstrap 0.5.0 has a bug,
(it tries to unbind 'focus' event handler, but handler doesn't exist)
https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.5.0.js#L1226
you can apply this changes
https://github.com/angular-ui/bootstrap/commit/bf30898da27272df75f6c7ff26545ed16ebf1978
or build it directly from github
or wait for 0.6.0

rails & markdown error: uncaught exception: Control.TextArea requires Object.Event to be loaded

So, I've got bluecloth installed and I'm trying to use the Control.TextArea javascript WYSIWYG editor.
Anyways, I followed the tutorial on the page and when I load the corresponding view, I get an error:
uncaught exception: Control.TextArea requires Object.Event to be loaded.
This comes from Control.TextArea js file.
Any ideas? Thanks

Resources