Polymer webcomponents cross-browser compatibility - javascript

I'm having frequent problems when using Google Polymer with non-Chrome browsers (Firefox/IE). Using Polymer on its own (such as viewing Polymer Element demo pages) does not seem to cause any issues. However, issues arise when using webcomponents.js is included on an existing web-application with many included GUI and utility packages (jQueryUI,
The issue seems to be related to webcomponents.js specifically. If no HTML imports are used and only webcomponents.js is imported, it throws the same error in both Firefox and IE:
webcomponents.js:2114 - SyntaxError: An invalid or illegal string was specified
webcomponents.js:113 - Error: Assertion failed
The specific line of webcomponents.js simply reads:
list = originalDocumentQuerySelectorAll.call(target, selector);
- which seems to have no immediately obvious syntax error.
Due to this error, other GUI elements on the page now exhibit erroneous behavior. There is no other useful console output provided when this happens, and no exceptions thrown by other JS packages. None of this behavior is shown when using Chrome.

I had the same error. I solved it, loading webcomponents.js before jquery.js.

I've tested with the last version of webcomponents.js in the last version of Firefox, simply loading it (no other import used) and it seems to work...
Test here
Plunker here
Did you tried with the last version of webcomponents.js or it was an old one? How about the version of Firefox?
Couldn't test on IE, I'm on linux, sorry.

I had the same problem when loading jQuery(v1.10.2) and polymer(webcomponents.js).
Fixed it using jQuery v2.1.4.

I was able to resolve the issue by removing $(document).ready from the script.

Not quite sure if this is still relevant but I bumped into this recently while running the unit tests using web-component-tester for a Polymer 1.11 based application. This issue start appearing on chrome v81 and was working fine before.
So, in each of the spec file we have an import for webcomponents.min.js which I replaced with webcomponents-lite.min.js and that worked for me.

Related

Error Quarto require invalid module (bertin.js)

I have developed the library bertinjs which allows to make svg interative maps. In Observable, require("bertin") works. In Quarto, require("bertin") does not work. The following error is returned: OJS Error. RequireError$1: invalid module. See the issue on Github (see). It's weird. Any help is welcome.
(Quarto dev here) I recently fixed a bug that would cause that behavior you're seeing. Can you try a release later than 0.9.430? Thanks!
Edit: I see now that bertinjs uses modern JS syntax, which the stable versions of the RStudio IDE don't yet support. Your example works on the latest Electron daily builds, the right-most column on the linked page.

Required props undefined in chrome 83

So after installing chrome 83 one of my pages in my app crashes. It says some of my props that's required is undefined. This only happens in chrome. I've tested in IE 11, Edge, Firefox and it works fine in those. It doesn't happen all the time either in chrome. Especially if i restart my localhost it might work a couple of times and then it starts breaking. I've also checked sha1d on master branch couple of weeks back and it also breaks there. This was never an issue before and started just recently. There has been no code changes for weeks related to that page. Any ideas what can cause this in chrome?
Based on what you are saying if problem only started happening recently in chrome, and this could be the failure of the prop-types library, its the library responsible for showing such a warning a required prop is undefined.
To make sure that it is indeed the problem of the prop-types library, you can switch environment to production, as this library should not work in prod. If indeed its the problem of this library you could try the following
Maybe try removing react dev tools and see if problem still happens
clean install of the library
update the library

Sporadically get error only in iFrame: Main.js Interpreted as amd module format, but called System.register

I'm seeing the error below in console only when loading in iframe when loading compiled ES6 Javascript classes using SystemJS v 0.19.41.
system.src.js:3054 Uncaught Error: Module https://d1jbmqjs327xbn.cloudfront.net/_ra/spaces-developer.pxand/assets/js/framework/builder/builder-client.js interpreted as amd module format, but called System.register.
at a. (system.src.js:3054)
at a. (system.src.js:3773)
at a.reduceRegister_ (system.src.js:4268)
at HTMLScriptElement.m (system.src.js:2851)
This seems to be the same issue as the one that was closed a couple years ago, but for this case it only happens in an iframe.
https://github.com/systemjs/systemjs/issues/970
It happens consistently in Safari, but sporadically in Chrome. The issue only started last week with no code change so I'm at a lost on what could have gone wrong. When this error occurs, it simply stop execute the Javascript which is very problematic.
Anyone has any idea on what could be the root cause of this issue?
Just in case this helps anyone. I found that the issue was with jQuery UI as it's using AMD by default. I had to revert back to an older version to fix this issue. The only explanation I have for the sporadic behavior in Chrome is that Chrome doesn't consistently execute scripts at the same rate unlike Safari. However, this still doesn't explain why I started seeing the issue all the sudden without any change.
So if this ever happens to you, look for a library that loads dependencies using AMD by default and either load them using import instead or if you don't have a choice, try rearrange the order of import and move the one that's causing the issue up. For my case, that's not possible and that's why I had to use an older version of jQuery UI.
As for why it only happens when it's in an iframe. Well, it remains a mystery. I can only think that it's because how content in iframe is loaded by browser. I would love to hear an opinion from an expert on this.

Script error with loading jQuery in IWebBrowser2

The following error shows up when I load a page that uses jQuery in my iWebView.
I checked if the JS files have any errors, but they all seem fine.
Any clues anyone?
Vasa, the latest 1.x version is 1.11.1:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
You may want to try pointing to that to see if the upgrade has fixed your script error. Also, using the non-minified version for development may give you more detail to line and character.

How do I determine what line of my javascript is causing this error in IE, when the console reports the bug is in jquery

I have a complex web application which is working in modern web browsers and IE10. I'm testing in older versions of IE7 now and running into a bug which stops the page from fully loading. The only error I can see on the screen is:
SCRIPT5022: Syntax error, unrecognized expression:
jquery.min.js, line 3 character 14659
Which points to:
{throw new Error("Syntax error, unrecognized expression: "+a)}
I have no idea what part of my javascript is triggering this. The code base is huge so I don't know where to even begin. Are there any tricks or standard methods to help me? No errors or problems are reported in Chrome, Firefox, Safari (latest versions) or IE10. I am using IE10 in ie 7 mode... the problem also persist in ie 7 ran in a virtual machine.
Thanks.
Edit: I am running jQuery 1.7 from this source: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
If your codebase is too big for you to step through it until you find the jQuery-operation that leads to the error, try searching your jQuery-selectors for a TAB-character.
I had the same problem (in IE7 only) when using jQuery 1.7.1. I found a selector that contained a TAB-character (in the middle of the selector) and once removed, all was well.
Besides Ian's point about jquery v2 - my understanding is that the line number is relative to a page with all the included JS files just being inlined.
So, take your browser view source, and then for each script src you have, remove that and copy in the actual JS file content (possibly wrapping in script tags I guess??).
Good luck!
Btw might be worth trying in IE8 or IE9 running in IE7 mode as they have better debuggers.

Categories