`import()` argument shouldn't be evaluated in the arrow scope

Reproduction

var babelPluginDynamicImportNode = require("babel-plugin-dynamic-import-node");
var babel = require("@babel/core");

var input = `
let i = 0;
import("./file-" + i++ + ".js");
assert(i === 1);

async function fn() {
  await import(await getSource());
}
`

var out = babel.transformSync(input, {
  configFile: false,
  plugins: [babelPluginDynamicImportNode]
});

console.log(out.code);

Output

let i = 0;
Promise.resolve().then(() => _interopRequireWildcard(require(`${"./file-" + i++ + ".js"}`)));
assert(i === 1);

async function fn() {
  await Promise.resolve().then(() => _interopRequireWildcard(require(`${await getSource()}`)));
}

As you can see in the output code, the first assertion fails because i++ is evaluated asynchronously, and the second one is a syntax error because await is inside a non-arrow function.

Proposed output

We can pass the import argument in Promise.resolve, so that it is in the correct scope:

let i = 0;
Promise.resolve(`${"./file-" + i++ + ".js"}`).then(_ => _interopRequireWildcard(require(_)));
assert(i === 1);

async function fn() {
  await Promise.resolve(`${await getSource()}`).then(_ => _interopRequireWildcard(require(_)));
}

[nicolo-ribaudo]

The solution is “don’t use this plugin with webpack”: webpack supports dynamic imports (since version 3 I think), so you don’t need to transpile them.

Also this plugin wasn’t meant to be used with webpack in the first place (hence -node in the name): there was https://github.com/airbnb/babel-plugin-dynamic-import-webpack which is the equivalent one but for Webpack.

[ljharb]

That’s a great catch and seems like a very trivial fix. Want to submit a PR?