[HELP]NuclearJS + Babel 6 as transpiler

[huylv]

I'm trying to replicate the tutorial on optimizely.github.io with Babel 6 (latest) as transpiler. I'm stuck at step 3:

// main.js
reactor.evaluate([]);
actions.fetchProducts();
reactor.evaluate([]);

can't seem to make it work:

/usr/local/bin/babel-node main.js
Map { "products": Map {}, "cart": Map { "itemQty": Map {} } }
Map { "products": Map {}, "cart": Map { "itemQty": Map {} } }
/Users/.../Documents/git/react-demo/node_modules/nuclear-js/dist/nuclear.js:5649
            throw e;
            ^

TypeError: Cannot read property 'id' of undefined
    at Store.decrementInventory (ProductStore.js:41:32)
    at Store.handle (/Users/.../Documents/git/react-demo/node_modules/nuclear-js/dist/nuclear.js:195:25)
    at /Users/.../Documents/git/react-demo/node_modules/nuclear-js/dist/nuclear.js:5981:27
    at /Users/.../Documents/git/react-demo/node_modules/nuclear-js/dist/nuclear.js:2199:17
    at ArrayMapNode.iterate.HashCollisionNode.iterate [as iterate] (/Users/.../Documents/git/react-demo/node_modules/nuclear-js/dist/nuclear.js:2548:12)
    at src_Map__Map.__iterate (/Users/.../Documents/git/react-demo/node_modules/nuclear-js/dist/nuclear.js:2197:33)
    at src_Map__Map.mixin.forEach (/Users/.../Documents/git/react-demo/node_modules/nuclear-js/dist/nuclear.js:4615:20)
    at /Users/.../Documents/git/react-demo/node_modules/nuclear-js/dist/nuclear.js:5976:33
    at src_Map__Map.withMutations (/Users/.../Documents/git/react-demo/node_modules/nuclear-js/dist/nuclear.js:2175:8)
    at Object.exports.dispatch (/Users/.../Documents/git/react-demo/node_modules/nuclear-js/dist/nuclear.js:5970:30)

Here is the list of dependencies:

    "dependencies": {
      "body-parser": "~1.13.2",
      "cookie-parser": "~1.3.5",
      "debug": "~2.2.0",
      "express": "~4.13.1",
      "fbjs": "~0.5.0",
      "jade": "~1.11.0",
      "morgan": "~1.6.1",
      "nuclear-js": "~1.2.1",
      "react": "0.14.3",
      "serve-favicon": "~2.3.0"
    },
    "devDependencies": {
      "babel-core": "^6.3.17",
      "babel-preset-es2015": "^6.3.13",
      "babel-preset-react": "^6.3.13"
    }

Please help.

[jordangarcia]

It sounds like a problem with your code and not babel.

TypeError: Cannot read property 'id' of undefined
    at Store.decrementInventory (ProductStore.js:41:32)

is trying to read product.id and product is undefined.

[huylv]

Thank you for your reply, Jordan. I believe I just copied everything in the tutorial until step 3. I know exactly where the error comes from, but can't explain why. Have a look at this gist and try it yourself if possible. I run it with command babel-node --presets es2015 main.js. All files are stored in a flat structure (I've adjusted some import paths to flatten).

Let me explain the data flow:

1. Action actions.fetchProducts() is triggered in main.js to send an even RECEIVE_PRODUCTS to the reactor.
2. There's only one callback registered to the reactor with this event, which is receiveProducts from ProductStore.
3. Instead of invoking the callback receiveProducts, somehow the reactor invokes decrementInventory instead, of course the payload is empty, thus the error.

I've tried the example downloaded from this git and it works just fine. However if I change to babel-node, things go wrong. The registered callback and the invoked callback never match. Sometimes, the invoked one is from CartStore.

[huylv]

Ok, so I think I've found the answer. If I change the import statements in ProductStore.js and actions.js from:

import { RECEIVE_PRODUCTS, ADD_TO_CART } from './actionTypes'

to:

import actionTypes from './actionTypes'

and use them like actionTypes.RECEIVE_PRODUCTS, everything works. With the former directive, constants can't be resolved, so their values are undefined. But I have no idea why...

Update: I've found the explaination for this issue on Stack Overflow. Turns out the former syntax is not quite valid in ES6 (preset es2015) so Babel 6 translates it differently. Thanks for your help.