ES6 modules working in Meteor but not Chrome Dev Tools?


#1

So I’ve been doing some coding in ES6 and trying to figure out how the import/export stuff works.

/lib/globalcode.js

'use strict';

let globalCode = {

	add: (x,y) => {
		return add(x,y);
	}

};

let add = (x,y) => {
	return x + y;
};

class Animal { 

  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }

};

export { Animal, globalCode };

/client/index.js

import { Animal, globalCode } from '/lib/globalcode.js';

Template.index.onRendered( () => {

  let animal = new Animal('cat');
  animal.speak();

  console.log(globalCode.add(5,6));

});

When I go into Chrome Dev Tools the output from animal.speak() and console.log(globalCode.add(5,6)) show up.

But when I manually type let animal = new Animal('cat') and globalCode.add(5,6) into the console I get Animal not defined and globalCode not defined, respectively.

Apparently no browsers officially support ES6 modules yet, but I’m confused on why console.log(globalCode.add(5,6)) and let animal = new Animal('cat') work when run from index.js but not when run from the browser.

The limitation above makes debugging very difficult for the client side stuff. Is it best to stay away from ES6 modules for the time being?

And is ES6 stuff fully supported on the Meteor server side?


#2

Never mind. Solved it. Just stupid scoping stuff. Those two commands aren’t in the global scope so Chrome can’t access them.