Using Polymer 2.0, I wrote an app whose entry point is a page in a CMS. The page loads the polyfills, imports the app's entry point, and puts the custom element into the page. This process works well in Chrome and Firefox; in Edge, however, there is a problem. I'm getting errors like this in the JavaScript console:
Object doesn't support property or method 'PropertyEffects'
Unable to get property '__mixinSet' of undefined or null reference
Function is not a constructor
The app is using the regular, unbuilt source code. How can these errors be interpreted or resolved?
Which Version of Edge do you use?
Note from polymer serve source (https://github.com/Polymer/polyserve/blob/master/src/compile-middleware.ts#L150)
// Note: The Edge user agent uses the EdgeHTML version, not the main
// release version (e.g. EdgeHTML 15 corresponds to Edge 40). See
// https://en.wikipedia.org/wiki/Microsoft_Edge#Release_history.
//
// Versions before 15.15063 may contain a JIT bug affecting ES6
// constructors (see #161).
So for Edge up to this version you still need to provide an alternative ES5 Version.
If you are using polymer serve it will transpile your ES6 to ES5 on the fly if needed.
For everything else you should use polymer build to provide ES5 code. Which you then serve if needed. (check on server via user agent string)
Related
We're developing a modern JS library which uses the ES6 syntax heavily and doesn't support IE11.
However we have a small number of users who want to use our library on IE11-compatible sites and we don't want to break their sites on IE11.
Question: is there some way to prevent our library from "exploding" on IE11? (All of the library functions can do nothing and return undefined if IE11 is detected)
For example, we were trying the following approach based on browser detection:
function libFunction() {
if(isIe11()) {
return;
}
// otherwise do some real stuff with ES6-heavy code
}
However the approach above doesn't work because IE11 throws syntax error even in the code that never gets executed, se we end up with errors like:
SCRIPT1002: Syntax error
File: main.db33ab01aedf59e2f70a.hot-update.js, Line: 47, Column: 1
Other approaches that we consider:
make our server return a fake implementation of our library if IE11 User-Agent is detected in the request headers. This will partially solve our problems, but won't help the users, who integrate our library into their bundle via NPM/webpack instead of getting it from our servers at runtime.
transiple our ES6 code to IE11-friendly code and polyfill all the APIs - we don't do that because we don't want the modern browser users to pay the price of the bloated ES5 code and polyfills.
override global error handler to silence the errors - this won't work, because the errors we get are syntax error, that are not handled by the error handler.
Is there any other possible solution?
I'm using consoletvs/charts to display charts in my Laravel application.
This works fine in all modern browsers, but I get an syntax error (and no charts displayed) in Internet Explorer 11 and below.
Tracing it down it seems this line (from consoletvs/charts, e.g. in init.blade.php line 8) is causing the (initial) error:
data => data.json()
So the culprit is the arrow operator, not supported in IE11. Using a polyfill seems to impossible (see Is there a polyfill for es6 arrow function?).
Now my questions:
Did I miss a feature in consoletvs/charts?
Is there a "Laravel" way to solve this (e.g. using babel/babel)?
Anybody got consoletvs/charts running on IE11?
Looks like you already got the answer to your question from the suggestion you got on the GitHub issues page for ConsoleTVs/Charts.
I will be changing this library to use my other tool:
https://github.com/Chartisan
This have a babel compilation step on the front-end or a pre-compiled
one. Also, the only thing needed will be the fetch() function. This
can be polyfilled.
Just stay tunned. I am writting the docs of Chartisan, and this lib
will soon be ported to that.
Reference:
Syntax Error on IE11 #554
As suggested, you should wait for the docs of Chartisan
I've successfully built a number of Polymer 2.0 elements and they run great in ES6 capable browsers.
When I try to transpile them to ES5, the browser throws a bunch of errors, like these:
Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
After some research, it looks like you need a native-shim, which comes along with the webcomponentsjs-es5-loader, but after switching to that now I'm getting a new error:
Class constructor DomModule cannot be invoked without 'new'
How do transpiled Polymer 2.0 elements get used in a ES5 browser? Am I missing something?
To use The Custom Element V1 Spec you must use classes. But ES5 browsers don't support classes. So there is an adapter that allows an ES5 browser to act like it is using classes.
See: https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs for more information.
You need to include the adapter on your ES5 browser before defining your Custom Element. This goes for Native components as well as Polymer 2+ components.
Rendering DraftJS Editor on IE11 gives the following error -
Invariant Violation: PluginEditor.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
This same setup works fine in Chrome/FF. We already use babel for transpiling ES6.
A related Github thread (https://github.com/facebook/draft-js/issues/296) mentioned multiple versions of React (since draft includes version 15+) while my app uses v0.14... I tried this, but upgrading isn't feasible right now)
The documentation mentions using es6-shim along with es5-shim (https://facebook.github.io/draft-js/docs/advanced-topics-issues-and-pitfalls.html#polyfills). I tried this but it didn't help. I get the same error.
Anything else I might be missing? Looking forward to your inputs.
Is it possible to reference the javax.script.ScriptEngine library when developing an android application?
If not is there anyway possible to evaluate a javascript expression in android?
For the classes javax.script.ScriptEngine, javax.script.ScriptEngineFactory and so on, you can add the jsr223.jar to your Android project: just copy the .jar file to your libs directory, and add it from Properties->Java Build Path.
These class will allow your JSR 223-compliant engines to compile. You can then do new SomeScriptEngienFactory().getScriptEngine() to get an engine. I've managed to do this with JNLua 1.0.4 and Rhino 1.7R2.
The file jsr223.jar can be downloaded from http://www.java2s.com/Code/Jar/j/Downloadjsr223jar.htm, a direct link is http://www.java2s.com/Code/JarDownload/jsr223/jsr223.jar.zip.
javax.script.ScriptEngine is not a default part of android, but you could easily jar up any libraries you need(assuming the size is reasonable, I'm not sure) and include them in your project.
According to this post, javax.script.ScriptEngine is not available in Android SDK. You can try the steps below to include the library, but the code may not run, even though it will compile.
Using Android Development Toolkit in Windows, I performed the following steps to get javax.script library.
Right-clicked on the project, went to Properties (Project).
Under the Java Build Path, I chose Libraries tab.
Select Add Library located on the middle right of the Tab
Select JRE System Library under Add Library and click Next...
Select Workspace Default JRE (jre 7)
Click Finish.
Click Ok on the Java Build Path to exist project properties.
Javax.script was then loaded.
If you want to evaluate some code in JS in android
1) to your gradle dependencies add (rhino):
compile 'org.mozilla:rhino:1.7R4'
2) write some code like this to get the result of JS evaluation
Context rhino = Context.enter()
// turn off optimization to work with android
rhino.optimizationLevel = -1
String evaluation = "2+2"
try {
ScriptableProject scope = rhino.initStandardObjects()
String result = rhino.evaluateString(scope, evaluation, "JavaScript", 1, null).toString()
} finally {
Context.exit()
}
3) You can write more complex scripts in JS to run in the android app also (functions etc.)