Browsers without script type module
tycode opened this issue · comments
So this is my new user experience: I've never heard of Transcrypt before today. I run the "hello" example on your front page. I click the "Click me repeatedly!" button and nothing happens. I open the inspector console and see an unhelpful "ReferenceError: hello is not defined" and the debugger provides no insight into the cause of the problem. I try using my alternate browser and get the same result. I read the whole of the https://www.transcrypt.org/documentation#faq and look through the contents of https://www.transcrypt.org/docs/html/index.html and still have no idea why your demo doesn't work.
My browser is Pale Moon. My alternate browser is Waterfox. I have not used Chrome or Firefox for over a year now and for various reasons I don't intend to go back to either of them. I did eventually try Edge, where it does work, but I never use Edge for anything other than testing and it took me a few hours to remember that it's even installed. Eventually I did figure out this must be because neither Pale Moon nor Waterfox support ES6 modules in client-side scripts, though I didn't even know this before today (i.e. nothing else I do on the Internet requires ES6 modules because it works just fine in these browsers); several Internet searches revealed little indication of this fact, and absolutely no indication that Transcrypt requires ES6 modules.
https://caniuse.com/#feat=es6-module shows that the first time ES6 modules were supported in any major browser was with Chrome 61 on September 5th, 2017. The feature is less than two years old. I'm surprised that any product would require such a feature without even mentioning it does so.
So, if I may make a few suggestions to aid others who may be in the same position as me, looking to use Python in the browser and believing Transcrypt to be the best way to do that. Even if nothing is done, at least those people will hopefully find this GitHub issue and understand the situation.
- At bare minimum, please make it clear that Transcrypt requires ES6 modules in your hello-world example, in your FAQ, and in your documentation.
- If possible, provide in your documentation alternate .html examples and necessary command line switches to produce code that doesn't require ES6 modules. If this is only possible in an older version of Transcrypt, it's still worth including this information, together with the last version number that supports it.
By the way, can anything be done about the elements on the Transcrypt website that lead to the home page and main sections when clicked? For some reason, they're not marked up as links; right-clicking doesn't give an option to open in new tab, and ctrl/shift is ignored when left clicking.
@tycode Typically ES6 modules are transpiled to ES5 using Babel - this is true for purely JavaScript projects as well.
@tycode Thanks for the feedback, definitely room for improvement. Re the hello world example, it suggests using the -n switch which provides output of non-minified human readable code in ES6 format, but as you mentioned fails for browsers using older JS engines. The -n switch overrides Transcrypts default minification using Google's Closure, which transpiles Transcrypts ES6 output to minified ES5 with wider browser support. Not everyone wants to install java though, and in those cases as mentioned by avosirenfal, one may also use other methods to transpile ES6, such as Babel.
Recent PaleMoon releases use a more recent version of SpiderMonkey for JavaScript support, however note that the JavaScript engine and compiler landscape is a little complex and one can't compile everything in ES6 back to ES5, so some developers may still choose to write in ES5. However, they would then be writing code to support around 2% of browsers, so not everyone can justify that. ES5 clearly has better browser support, but even then one may encounter issues. Hope that helps.
OK, so I've tried without the -n switch (I had to switch from JRE 7 to JRE 8 to resolve this error but that's no problem) - though while it now produces minified code, the output .js file still uses import
and export
keywords, and of course, it doesn't change the static HTML code <script type="module">import * as hello from './__target__/hello.js'; window.hello = hello;</script>
.
So, sadly, the minifier doesn't remove the dependency on modules, even if it may well transpile lots of other ES6 features down. The issue with Pale Moon and Waterfox isn't ES6 in general - they support lots of ES6 features e.g. Symbol, WeakMap, arrow functions, etc., just not modules.
I'll give Babel a try at some point though, if that works then it's a good enough stop-gap until PM implements them. Thanks for the suggestion!
thanks for the information. I updated my tutorial on transcrypt which can be found here:
https://github.com/bunkahle/Transcrypt-Examples
As it is said in the tutorial you still can go with the former version 3.6 of transcrypt by installing it with
pip install transcrypt==3.6
which should run fine in your browser since it does not rely on ES6 modules but on pure javascript.