Transpilation of ESNext in the Creating a todo app -tutorial does not work.

[Peppe]

I'm submitting a bug report

• Library Version: It is what ever comes with the https://aurelia.io/docs/tutorials/creating-a-todo-app#setup zip labeled "Download the Basic Aurelia Project Setup" on 2018-05-09. The framework is in the scripts -folder. I looked through the source files but there is not a mention to the version.

Please tell us about your environment:

• Operating System: OSX 10.13

• Node Version: v7.5.0

• NPM Version: 5.8.0

• Aurelia CLI OR JSPM OR Webpack AND Version None.

• Browser: Chrome 66 | Tested Firefox as well just in case

• Language: ESNext

Current behavior: I'm looking into Aurelia for the first time. I ended up at https://aurelia.io/docs/tutorials/creating-a-todo-app#setup to follow the instructions. I downloaded the zip and went on with the instructions of the page. I chose ESNext as the language. Getting to https://aurelia.io/docs/tutorials/creating-a-todo-app#rendering-the-app, I tried to render my app for the very first time. I installed http-server and run http-server -o -c-1. The browser popped up but was blank. Going into console, this error was waiting for me there:

Error: (SystemJS) SyntaxError: http://127.0.0.1:8080/src/main.js: Unexpected token (3:33)
      1 | import { Aurelia } from "aurelia-framework";
      2 | 
    > 3 | export function configure(aurelia: Aurelia) {
        |                                  ^
      4 |   aurelia.use.basicConfiguration();
      5 |   aurelia.start().then(() => aurelia.setRoot());
      6 | }
        at c.h.raise (http://127.0.0.1:8080/scripts/babel/systemjs-plugin-babel@0.0.12/systemjs-babel-browser.js:16:20257)
        at c.i.unexpected (http://127.0.0.1:8080/scripts/babel/systemjs-plugin-babel@0.0.12/systemjs-babel-browser.js:15:8482)
        at c.i.expect (http://127.0.0.1:8080/scripts/babel/systemjs-plugin-babel@0.0.12/systemjs-babel-browser.js:15:8438)
        at c.k.parseBindingList (http://127.0.0.1:8080/scripts/babel/systemjs-plugin-babel@0.0.12/systemjs-babel-browser.js:15:30599)
        at c.m.parseFunctionParams (http://127.0.0.1:8080/scripts/babel/systemjs-plugin-babel@0.0.12/systemjs-babel-browser.js:15:20049)
        at c.m.parseFunction (http://127.0.0.1:8080/scripts/babel/systemjs-plugin-babel@0.0.12/systemjs-babel-browser.js:15:19835)
        at c.m.parseFunctionStatement (http://127.0.0.1:8080/scripts/babel/systemjs-plugin-babel@0.0.12/systemjs-babel-browser.js:15:13808)
        at c.m.parseStatement (http://127.0.0.1:8080/scripts/babel/systemjs-plugin-babel@0.0.12/systemjs-babel-browser.js:15:9872)
        at c.m.parseExportDeclaration (http://127.0.0.1:8080/scripts/babel/systemjs-plugin-babel@0.0.12/systemjs-babel-browser.js:15:25025)
        at c.m.parseExport (http://127.0.0.1:8080/scripts/babel/systemjs-plugin-babel@0.0.12/systemjs-babel-browser.js:15:24791)
    Error loading http://127.0.0.1:8080/src/main.js

Looking at the error, it seems that the runtime transpiler, installed into the loader, does not work. I have <script src="scripts/config-esnext.js"></script> in my index.html as mentioned in https://aurelia.io/docs/tutorials/creating-a-todo-app#the-indexhtml-page and as provided in the zip.

I got my app working by switching over to TypeScript. That is, change the above line to <script src="scripts/config-typescript.js"></script> and rename app.js, main.js and todo.js to *.ts.

Expected/desired behavior:

• What is the motivation / use case for changing the behavior? I would be nice to have a working tutorial to not alienate evaluators.

[EisenbergEffect]

@Peppe I'm terribly sorry for the issue you've experienced. I've looked into it and it appears that there's actually a bug in our site. The language switcher that lets you choose between ES Next and TypeScript has somehow broken ;( As a result, it appears to be showing you TypeScript code in the tutorial, rather than JavaScript. That's breaking the compiler. I've attached a file with updated source for JavaScript. I'll work on fixing the root cause this evening. Again, I apologize for the inconvenience. src.zip

[EisenbergEffect]

Again, apologies for the trouble you've had. We've found the issue in the site and deployed the fix. Thank you for letting us know!

[Peppe]

Awesome! Thanks for fixing it. I don’t know enough about TypeScript and ESNext to know that it wasn’t working. I thought the similarity was one of the perks. 🙂

Having these tutorials working is really important for adoption! 👍