As far as I know, this is valid EcmaScript6:
let obj = {foo: "foo", bar: "bar"};
let {foo, bar} = obj; // <- Syntax error here
Firefox runs this code just fine, but both Google Chrome and Chromium give me this error:
Uncaught SyntaxError: Unexpected token {
I know in firefox, scripts tags have to be flagged with "version=1.7" in the type attribute for this to work, but in Google Chrome this results in the script getting ignored. A normal script tag gives this error.
Does this mean this feature is not implemented in Google Chrome? Or am I missing something?
That's right. Currently, it isn't supported yet.
https://devdocs.io/javascript/operators/destructuring_assignment
Although Chrome doesn't support some new features of ES6 (check this table to see what is already supported on different browsers), you can use a polyfill/plugins to enable certain features on Chrome. You can find polyfill and plugins on Babel. Just read through the plugins documentation and implement the ones you want.
Related
My website fails to load on older versions of Firefox.
The following is displayed in my console:
TypeError: Function.prototype.toString called on incompatible object.
I also see a warning that complains: mutating the [[Prototype]] of an object will cause your code to run very slowly, but this was a known issue with FF that didn't actually impact site responsiveness. So ignoring this warning for now.
The Function.prototype.toString error is my main focus, just because I want the site to actually show up for FF users. It seems like it's coming from a collection of babel-related node modules, including but not limited to: babel-core/browser-polyfill.min.js, babel-core/browser.min.js, babel-polyfill/browser.js, etc.
I depend on these libraries to transpile my ES6 react code, but haven't been able to find any fixes yet. Any insight into a workaround would be amazing.
Screenshot of console:
UPDATE 1
From what I could see in the console, the minified browser-polyfill.min.js complained about this line:
(Function.prototype,u,function(){return"function"==typeof this&&this[i]||c.call(this)})}
Specifically the ending, where it tries to attempt c.call(this).
Upon doing some digging it seems that this is the corresponding line in an unminfied version:
(Function.prototype, TO_STRING, function toString(){
return typeof this == 'function' && this[SRC] || $toString.call(this);
})
Still at a loss as to what exactly the issue is...
I have an app up and running, and it works great in Chrome and Firefox. Safari is another story. For the sake of example, let's pretend this is my app:
'use strict';
const x = 3;
function test(){
let y = 4;
return y;
};
When I run it in Safari I get:
SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.
Then if I remove 'use strict' I get:
SyntaxError: Unexpected identifier 'y'
At this point I decided to take my first look into transpiling, so I installed Babel and I have my client-side code converted to ES5 and sitting in a new folder.
My question now is, what's the best practice for loading the original code if a user is using Chrome/Firefox, but loading the transpiled code if they're using Safari? Is my head even in the right place here?
To detect if safari is being used:
var safariCheck=Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
Then you can load the code you want for safari if the above statement qualifies.
If it does not you can load the Firefox or Chrome code.
The cleanest way to check feature is to use Modernizer
With this library you can check that browser have es6 feature ready with this code:
if (Modernizr.es6array) {
loadNewCode();
} else {
loadOldCode();
}
You can find more examples and documentation here.
I recently switched to using video.js version 5.6.0 (was previously using a 4.x version), and noticed that I now consistently get the following error using the non-minified version of video.js:
Exception was thrown at line 811, column 5 in http://vjs.zencdn.net/5.6.0/video.js
0x800a01b6 - JavaScript runtime error: Object doesn't support this property or method
I haven't changed anything in my use of video.js, and the line:
<script src="http://vjs.zencdn.net/5.6.0/video.js"></script>
appears immediately below the video element. The matching 5.6.0 CSS appears in a link tag in the head section.
This is occurring under Internet Explorer 11 on Windows 8.1. The error is reported through Visual Studio 2013.
I tried falling back to video.js version 5.4.6, but it gives the same error at the same line. I tried the minified versions of both 5.6.0 and 5.4.6, and both give the same error (at a different line/column, of course).
I've examined the offending area, but must admit I'm not well-versed enough in JavaScript to determine what the cause of this issue is. I've commented-out all of my own JavaScript, to ensure that it's not interacting somehow with video.js, and I still get the error consistently.
Any ideas on how to fix or work around this error? The video.js player seems to work as expected in spite of this error, so it's not a blocking issue...just a concern.
If you look at that part of the script, you'll see the line that errors is handled in a try catch block, precisely because an error is expected on modern browsers. The subsequent code only needs to run on browsers that don't error. This is from lodash, a utility library used by video.js. These sort of tests are not uncommon.
var isHostObject = (function() {
try {
Object({ 'toString': 0 } + ''); // Line 811
} catch(e) {
return function() { return false; };
}
return function(value) {
// IE < 9 presents many host objects as `Object` objects that can coerce
// to strings despite having improperly defined `toString` methods.
return typeof value.toString != 'function' && typeof (value + '') == 'string';
};
}());
There's nothing to fix here. You would only see this error at all if you have 'break on all exceptions' turned on in your debug tools (terminology may vary in Visual Studio). 'Break on unhandled exceptions' is generally more useful as this shows the errors that are not expected and need to be actioned.
So I was fiddling around with function overloading (I believe thats the correct term for this). Heres what happened:
function example(a=3,b=6){
console.log(a);
console.log(b);
}
In firefox, this did exactly what I expected.
example()
3
6
example(17)
17
6
example(10,20)
10
20
However, when I tried this in the console in Chrome, it failed to even create the function. I got error
SyntaxError: Unexpected token =
Why is this happening?
Default values to functions are part of ECMA Script 6 specifications. You might be using the latest version of FireFox in which they would have implemented it.
All the browsers which havn't implemented the ES6 specifications won't be able to parse the expression. That is why it is failing.
You can check Kangax's compatibility table to know where your browser supports it or not.
I want to use Reflect.parse in my JavaScript in Firefox.
MDN says to import this into the global object via
Components.utils.import("resource://gre/modules/reflect.jsm")
However, this results in the following error message:
Error: Permission denied for <file://> to get property XPCComponents.utils
I have tried this in Firefox 11 and Aurora.
How can I get access to Reflect.parse?
EDIT:
The error message is due to the following fragment:
Component.utils
There is no real solution to this problem. The documentation on Reflect.parse in the wiki is misleading, to say the least.
If you want a "pure" JavaScript solution in SpiderMonkey/Firefox, don't rely on Reflect.parse.
I see a lot of projects using the parser from Narcissus and I should have done the same.
EDIT: The Esprima project is an excellent implementation of the Mozilla Parser API. After replacing Reflect.parse with esprima.parse all my 150+ test cases were still green, except for 5 or so dealing with non-standard SpiderMonkey extensions like let expressions (which I find pretty impressive).