Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ECMA 6 Not working although experimental js is enabled

I have the latest Chrome version (45 and also Chrome Canary which is in version 47), both with the Experimental Javascript flag enabled. I want to use ECMA6, but it doesn't work. I don't know why. Is there any trick or other flag that must be enabled too?

Every reserved word of ECMA6 (like import, class, or whatever) throws an "Uncaught SyntaxError: Unexpected reserved word" error in Chrome 45 and an "Uncaught SyntaxError: Unexpected token import" error in Chrome Canary.

I will appreciate any help. And, because I asked this a few months ago without getting any answer but "possible duplicate" of this Using ECMAScript 6 , it is not. It does not solve my problem.

Thanks.

--- EDIT --- I want to use modules, since I like more the ecma6 modules than using Require or Common. And I also like the sugar syntax of classes, code looks better :)

like image 252
Emilio Grisolía Avatar asked Sep 27 '15 15:09

Emilio Grisolía


People also ask

Is ECMAScript 6 supported?

ECMAScript 1 - 6 is fully supported in all modern browsers.

What is JavaScript ECMAScript 6?

What is ES6? ES6 or the ECMAScript 2015 is the 6th and major edition of the ECMAScript language specification standard. It defines the standard for the implementation of JavaScript and it has become much more popular than the previous edition ES5. ES6 comes with significant changes to the JavaScript language.

Can we run ES6 in browser?

You can run ES6 in the browser in the "Try it out" section of their website. It functions similarly to jsfiddle.


3 Answers

Modules are not yet natively supported in any browser. You will need to use a transpiler such as Traceur or Babel. Take a look at one of the following to help you get started:

  • Choose ES6 modules Today!
  • ES6 In Depth: Using ES6 today with Babel and Broccoli
  • Writing client-side ES6 with webpack

As for classes, you may be able to use these natively without having to go through a transpiler. You can check the compatibility table here to see which browsers support classes natively today:

https://kangax.github.io/compat-table/es6/

As of right now, you can see that the majority of browsers do not yet support classes natively. However, if you are using Babel or Traceur, that shouldn't be a concern.

like image 64
Sergey K Avatar answered Sep 28 '22 10:09

Sergey K


Add type="module" to the script tag. That should solve your problem.

like image 45
stackoverflow Avatar answered Sep 28 '22 09:09

stackoverflow


Here are a couple feature lists that tell you what features work in Chrome 45.

Chrome Feature Status: https://www.chromestatus.com/features

ES6 compatibility matrix: https://kangax.github.io/compat-table/es6/

What you will find is that many features such as the class sugar syntax work fine in Chrome 45, but require strict mode in order to be enabled.

For example, if you run this jsFiddle that uses class in Chrome 45 or greater, it will work: http://jsfiddle.net/jfriend00/xd56k8n3/. If you run it outside of strict mode, it reports Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode.

Modules do not look like they yet have support in any browser.


FYI, one common way to write code now in ES6 is to use a transpiler like Babel or Traceur that you feed ES6 code into and it converts it to ES5-compatible code that runs in current browsers. You get to write in ES6, but have compatibility with current browsers.

like image 41
jfriend00 Avatar answered Sep 28 '22 09:09

jfriend00