Esm: Not working with babel-register

[raine]

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "node": "current"
      }
    }]
  ]
}

require('@std/esm')
require('babel-register')
require('./src/index')
// etc.

(function (exports, require, module, __filename, __dirname) { import path from 'path';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)

Removing require('babel-register') fixes the issue but doesn't work because babel is used for some syntax transformations.

So the issue looks to be that babel is for some reason wrapping the files with a function that makes the import syntax not work because it should be at start before anything.

[jdalton]

Thanks @raine!

Until just a few days ago @std/esm ran its unit tests with babel-register, so I know it's possible. The @std/esm and babel-register loaders should play well together. The @std/esm loader is designed to pass through to others, like babel-register. Have you tried swapping the order of your require calls?

require('babel-register')
require('@std/esm')

The swapped order mimics my use with mocha

mocha --require @std/esm --compilers js:babel-register

[raine]

I tried swapping order, but that seems to break babel transformations.

Here's a broken test case: https://github.com/raine/esm-babel-test

require('babel-register')
require('@std/esm')

require('./app')

% node start
/Users/raine/esm-babel-test/foo.js:2
export default {...foo}
                ^

SyntaxError: Unexpected token
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Module.require (module.js:517:17)
    at Object.<anonymous> (/Users/raine/esm-babel-test/app.js)
    at Object.<anonymous> (/Users/raine/esm-babel-test/app.js)
    at Module._compile (module.js:573:30)

Swapped require order:

require('@std/esm') 
require('babel-register')

require('./app')

% node start
/Users/raine/esm-babel-test/app.js:1
(function (exports, require, module, __filename, __dirname) { import foo from './foo';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:537:28)
    at loader (/Users/raine/esm-babel-test/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/raine/esm-babel-test/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)

[jdalton]

Thanks for the repro!

It looks like swapping the order did "fix it". What you're seeing with {...foo} error is the lack of object-rest-spread support (#14). This is an Acorn issue at the moment. There's Chrome issue to track adding an Acorn plugin too.

You should show your support for the Chrome issue (star it) and also file a bug on babel-register to pass-through to other loaders so that the order can work with...

require('@std/esm') 
require('babel-register')

...as well, which would allow Babel to transpile before handing it off to @std/esm.

Update:
@std/esm v0.7.0+ supports parsing object rest/spread syntax.

[jdalton]

I've opened an issue on babel-register https://github.com/babel/babel/issues/6248.

\@FND @tilgovi

[NathanielHill]

It looks like your problem is with "modules": false, and that using esm is unnecessary here.

@raine @jdalton