How can I import an npm package that uses the ES6 module syntax?

Hello,

I’m new to developing Atom packages, and I’m working on writing my first one. I want to import a dependency from NPM that uses the ES6 module syntax, but unfortunately Atom doesn’t seem to like it very much.

I’m working from the template generated by “Package Generate: Generate Package”, which has 'use babel'; at the top of all Javascript files but uses ES6 module syntax, so I’m guessing that it doesn’t really support the ES6 module syntax - it just pretends to and uses Babel to transpile stuff.

This is all very well, but if I want to import from an NPM package that uses the ES6 module syntax, Atom doesn’t appear to be clever enough to do the same for dependencies, and I get this error if I try to import something in an NPM package that uses ES6 module syntax itself:

Must use import to load ES Module: FILEPATH_HERE

This is especially strange, since Node.js for a while now has not required the extra --experimental-modules flag to enable native ES6 module support.

For reference, atom -v shows this:

Atom    : 1.55.0
Electron: 6.1.12
Chrome  : 76.0.3809.146
Node    : 12.4.0

My question is this: How can I import a package from npm that uses the ES6 module syntax itself?

Have you tried using a bundler such as Rollup or Webpack?

The latest Atom version still uses Electron 6, which comes with Node 12.4.0 – so ES6 modules are still behind that flag

Hey there! Thanks for the reply. Are you talking about bundling my Atom package with Rollup? I could certainly do that. it would increase complexity, but I’ve used Rollup before so it wouldn’t be too much of an issue.

I guess then you would point the npm package.json main directive at the output of the build step, as opposed to the real source of the package?

I haven’t looked into publishing yet, but I would guess that there’s some kind of provision for running a build step automatically before publishing.

Thanks for the help!

I think in Node.js it’s now discouraged to build packages at install-time, though I can’t provide a links to back up this claim.

Personally, I’m pre-bundling my packages, but I’m shipping both, the sources and the bundled code, which doesn’t make a lot of sense. However, there are some strategies on how to avoid this. See this discussion for details:

As for bundling with Rollup, you might want to use this plugin by the atom-ide-community

Ah, thanks for the links! I’ve managed to get Rollup working as intended, and apparently if you name an npm script prepare then it’ll get run before one publishes (though I couldn’t make sense of that Rollup plugin you’ve linked to, sadly).

Thanks again!

1 Like