Meteor 1.5: How to actually dynamically import modules?

help
1

Because the proposed way in the blog does not work for me:

const User = await import('./User');

this yields the error “await is a reserved keyword”.

The import('./User').then(...foo...) style is frankly a) cumbersome and b) doesn’t work that well with React.

Of course there’s also this:
https://blog.meteor.com/meteor-1-5-react-loadable-f029a320e59c

Then again, that’s even more cumbersome if you simply don’t need to display a spinner while a component is loading.

So, what to do?

2

So, await requires that it’s used within an async function. So instead of (for example):

Template.hello.onCreated(function() {
  const Something = await import('/imports/client/Something');
  //...
});

you need to use:

Template.hello.onCreated(async function() {
  const Something = await import('/imports/client/Something');
  //...
});
9 Likes
3

Hey @robfallows you are the long awaited async-hero :muscle: , you know that, don’t you? :wink:

8 Likes
4

:smile: - I’ve started wearing my underpants on the outside now.

Fortunately for everyone here, I don’t have a picture to share.

13 Likes
5

Also, if someone can show how to do it in ES5 - would be super.

6

I think you’re stuck with standard Promise.then syntax.

7

I will have to check it out. I just did a quick compilation with Babel and :flushed:

'use strict';

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

Template.hello.onCreated(_asyncToGenerator(regeneratorRuntime.mark(function _callee() {
  var Something;
  return regeneratorRuntime.wrap(function _callee$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          _context.next = 2;
          return import('/imports/client/Something');

        case 2:
          Something = _context.sent;

        case 3:
        case 'end':
          return _context.stop();
      }
    }
  }, _callee, this);
})));

Maybe there can be a simple package for this

8

So, why ES5 syntax?

1 Like
9

I dunno - I think its much simpler than ES6 and I can free-hand pretty well. I really do not see the benefit - or have the desire - to move to ES6.

On another note, I have no issue with Blaze, or globals, since Meteor’s packages are pretty good for filling in what imports/exports do. But dynamic imports are very attractive.

2 Likes
10

Well, I guess you can skip all of ES6 and just use async and await from ES7. That’s a small increment with huge benefits.

11

Agree there - but I believe Meteor forces you to use imports/exports everywhere when you use the ES6 package, which is kind of blah.

1 Like
12

Not true (at least not at the moment). You can still write code like it always used to be.

13

Oh wow - I just did a quick test, looks like you are right. Nice.

14

@msavin Meteor has gone to extreme lengths to preserve the old style of programming that you seem to love. What if you met us halfway and gave the modern stuff a try? :wink:

9 Likes
15

Yeah man - I really appreciate it! I respect the new way - but as you can tell I am comfortable in my “old” ways. I’m always a bit anxious that the ES5 way will be “removed” from Meteor, so it feels great hearing that.

When you say modern stuff - do you mean learning ES6 or trying some things in specific? I would be open to try it.

16

How can we start using ES7’s async & await today?

17

Just use it. As long as you’ve got the ecmascript package in your project (which is installed by default) you can use it today.

For information, it’s been available since 1.3

1 Like
18

Just start writing async functions and await expressions! They’ve worked in Meteor since 1.3 (IIRC). The generated code isn’t lovely, but the good news is you won’t have to rewrite your own code to take advantage of native support, when browsers eventually catch up.

3 Likes
19

Nice. I’m now using the imports directory, modules, and ES6 whenever possible in my Meteor 1.3 application, but it’s taking a while to refactor everything. :smiley:

So ES7 is included? Great! Do you know of a good resource to learn all about Async/Await in ES7 and maybe even how to make use of it with Meteor today?

Also, does anyone have an idea when Meteor 1.5 is dropping?

20

Glad you asked :wink:

4 Likes