Meteor 1.3 package: second import causing: SyntaxError: Unexpected reserved word

#1

I’m working on a package. The overall folder structure of the package is:

 - demo
 - lib 
   - imports
     - client
       - index.js
   - client
      main.js
 - package.js

In package.js I have:

Package.onUse(function(api) {
  api.versionsFrom('1.3');
  api.use('ecmascript');
  api.mainModule('lib/client/main.js','client');
});

'lib/client/main.js' is:

import '../imports/index..js';

and index.js is:

import { Meteor } from 'meteor/meteor';

When including the package in an effectively empty demo app I somehow get:

import { Meteor } from 'meteor/meteor';
^^^^^^
(STDERR) SyntaxError: Unexpected reserved word

Which seems strange since the first import is seemingly working. The same thing happens if I move index.js to be in the same folder as main.js and do import './index.js' instead. I should also mention the demo app has the ecmascript package added.

any ideas?

#2

Maybe strip your code back to basics to double check everything, as this should be working. Here’s a quick example following your directory structure that works (source here):

Package:

  1. package.js
Package.describe({
  name: 'awesome-package',
  version: '0.0.1'
});

Package.onUse(function(api) {
  api.versionsFrom('1.3.2.4');
  api.use('ecmascript');
  api.mainModule('lib/client/main.js', 'client');
});
  1. lib/client/main.js
import { MeteorAwesomeness } from '../imports/client/index.js';
export { MeteorAwesomeness };
  1. lib/imports/client/index.js
import { Meteor } from 'meteor/meteor';
export { Meteor as MeteorAwesomeness };

Sample App:

  1. client/main.js
import { MeteorAwesomeness } from 'meteor/awesome-package';
console.log(MeteorAwesomeness);
#3

Thanks

That’s basically what I did. I have a bunch more code, but stripped everything back to just the basics. That’s why the first import working and second one not working is so strange. My guess at the moment is that the error message I am getting is a false lead. Maybe it’s kicking out the unexpected reserve word because their is a syntax or setup error somewhere else.

Either way I’ll try your troubleshooting repo to make sure its not a weird system thing and move things over to a new projects bit by bit until something fails.

Thanks again for going through the trouble of setting up a troubleshooting repo. BTW do you know of any packages that are good canonical examples of how to write a package for 1.3. Most things I see out there are still used api.export and addfiles.

#4

Sure thing - take a look at the latest version of jagi:astronomy. It’s been fully updated to leverage ES2015 module support.

#5

Also check out https://github.com/trombonehq/trombone for an even simpler example of an ES2015 module package :wink:

be aware that if you use import statements the users of your package must also be on Meteor 1.3+

#6

are you running eslint over this as well? There might be an odd character?

There’s also a typo here:

#7

this works fine.

Then I added a file

packages/awesome-package/lib/imports/client/index.html

and tried to import it in index.js with

import './index.html'

and got

uncaught error: cannot find module './index.html'

What is wrong here ?

#8

You’ll have to add extra dependencies to your package to get HTML imports to work. Is your index.html file a Blaze template for example? If so you’ll need to add the following to your package.js:

...
Package.onUse(function(api) {
  ...
  api.use('blaze-html-templates');
  ...
});
...

I’ve updated my example to show this here.

#9

Thank you very much! I am actually using angular templates. Which dependencies do I use in this case? I tried different combinations of ‘angular-templates’, ‘angular’, ‘pbastowski:angular-babel’ etc. as described in the Meteor todos tutorial and the Angular-Meteor socially tutorial, but could not get it to work. Of course these tutorials are a bit different because here I am trying to create a package.