choo
choo copied to clipboard
Magic in the emitter callback?
Expected behavior
choo
should accept valid JS code in the emitter callback.
Actual behavior
choo
throws
"Unexpected token: punc ()) while parsing file: /app/index.js"
when an ES6 arrow function is used the emitter callback.
Steps to reproduce behavior
This is working code (adapted from the intro tutorial, running on glitch)
const choo = require('choo');
const html = require('choo/html');
const main = require('./templates/main.js');
const app = choo();
app.use(function (state, emitter) {
state.animals = [
{ type: 'lion', x: 200, y: 100 },
{ type: 'crocodile', x: 50, y: 300 }
];
emitter.on('addAnimal', function () {
const obj = { type: 'lion', x: 100, y: 200 };
state.animals.push(obj);
emitter.emit('render');
});
});
app.route('/', main);
app.mount('div');
When I replace function ()
with () =>
emitter.on('addAnimal', () => {
const obj = { type: 'lion', x: 100, y: 200 };
state.animals.push(obj);
emitter.emit('render');
});
choo
throws the above error. Some kind of magic going on?
That's odd. I tried to reproduce the error but couldn't. Have I missed something here? Source: https://glitch.com/edit/#!/cliff-peridot https://cliff-peridot.glitch.me
I'm using Bankai here to bundle the app, what are you using? Or are you maybe using an old version of Node which doesn't support arrow functions?
I have remixed the starter tutorial linked from https://handbook.choo.io/your-first-choo-app/ keeping the original configuration. I just specified node version 10 just to be sure. If I copy in your code it breaks as well.
https://glitch.com/~magical-apple
https://glitch.com/edit/#!/magical-apple?path=index.js:1:0
Anything I could be missing?
It uses an old version of uglifyify that doesn't support arrow functions. Update to v5 and it works, see remix here: https://glitch.com/edit/#!/cedar-manuscript?path=package.json:14:0
Confirmed. Thanks a lot. @tornqvist that should be updated in the https://glitch.com/edit/#!/project/choo-animals-starter as well.