Laravel consoletvs/charts and IE11 - javascript

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

Related

Is there a way to silence syntax errors in IE11 in a modern JS code?

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?

DraftJS with Internet Explorer

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.

Unhandled exceptions in jQuery 2.2.1 ("Cannot find function createHTMLDocument in object" & "Cannot convert a Symbol value to a string")

I've recently updated from an older 1.x version of jQuery to the latest 2.2.1 and mostly it seems to be running just fine. Unfortunately I'm constantly receiving 2 error messages in raygun which I don't know how to handle:
The first one is Cannot find function createHTMLDocument in object and only happens in Firefox 24.0 under Win 7 (according to raygun).
The second one states Cannot convert a Symbol value to a string and only happens in Firefox 38.0 in the OS reported as Linux Core.
Both errors don't provide any stack trace (at function () line null, column null (null:null)) and I can't reproduce neither one myself using the same FF & OS version using browserstack.
I'm not quite sure if those errors where already happening earlier in the older jQuery version since I was loading this version from a different CDN which didn't provide any useful errors from within jQuery at raygun at all due to same origin stuff.
One more thing: If it turns out, that those errors actually happen in some legacy browsers which just report an incorrect version 24 & 38, I'd also be happy to know, how to detect those browsers early so that I can show them an appropriate message before the errors occur.
I'd really appreciate any help/input on how to tackle this issue since I'm a little clueless by now.
Thanks

Problems testing XHRs/Fetch with Chrome 42 on OS X

We are using Marty.js (and React.js) in our webapp.
As I read in the Marty.js docs they're using the fetch-polyfill to communicate with the server over http. Everything fine so far ...
While testing in Google Chrome (currently v42) first I noticed that the body of the request isn't shown (but sent ?!?) and then that I can't "replay XHR" from the dev-tools.
Can anybody tell me why this is the case?
update 04/26/15
Because it seems to not have anything to do with marty.js I removed it from the question's title.
I believe what you're seeing is related to two issues in MartyJS' github.
https://github.com/martyjs/marty/issues/308 (success function called regardless off http status code returned)
https://github.com/martyjs/marty/issues/293 (martyjs not deserialzing json properly in certain browser setups) <-- this is the one you're having a specific issue with it looks like.
There was an update to the library to fix both of these. I recommend upgrading. We haven't had any problems since grabbing the latest as of a week ago (0.9.14). I believe a new version has already been released (0.9.15) while work on 0.10 is being done in parallel.

What do I get an error with highcharts, only in IE8

The charts are working ok in most browsers, including firefox and Opera. However in IE I am getting:
Object doesn't support this property or method
report_graph.js
Code: 0
URI: http://10.11.4.92:5000/assets/report_graph.js?body=1
It's possible that you're calling the javascript file along with a query-string attached. Check out: Passing Querystring style parameters into Javascript file and Passing parameters to JavaScript files for possible solutions.
It wa all due to a `.trim() at the end of some of the code !
e.g. I had $('some selectors).text().trim()
Changing it to $('some selectors).text().trim() fixed it.
As it actually has worked ok in some browsers this seems to suggest an actual issue with the javascript engine in IE. Either it doesn't support the method that other browsers do... or it does not handle the error as gracefully, causing a runtime exception for a error that other browser ignore.

Categories