How to use an expression in an import with Babel + Webpack

Question

I have the following code in a TypeScript file:

await import(`@resources/videos/${key}.mp4`)
  .then((mod) => mod.default)
  .catch((err) => console.error('failed to load tutorial', err))

This should work , however, it doesn't. I am using babel-loader , not ts-loader , but I still get the same issues whether I use TS or JS, and whether I use preset-typescript or not.

When I run Webpack, I get an error: Critical dependency: the request of a dependency is an expression . Investigating further by compiling the code using the Babel CLI reveals that the expression I wrote above compiles to this:

return Promise.resolve("@resources/videos/".concat(key, ".mp4")).then(function (s) {
  return _interopRequireWildcard(require(s));
}).then(function (mod) {
  return mod.default;
}).catch(function (err) {
  return console.error('failed to load tutorial', err);
});

It appears that Webpack is being tripped up by the fact that Babel is messing around with my string concatenation by converting it to a .concat() call and wrapping it in Promise.resolve() .

I tried to sidestep this by using ordinary concatenation instead of template literals, but that only changed Babel's output slightly:

return Promise.resolve("".concat('@resources/videos/' + key + '.mp4')).then(function (s) {
  return _interopRequireWildcard(require(s));
}).then(function (mod) {
  return mod.default;
}).catch(function (err) {
  return console.error('failed to load tutorial', err);
});

My setup:

• Compiling TS and JS with babel-loader only, no ts-loader
• Babel presets: env , typescript ,
• Babel plugins: proposal-optional-chaining , proposal-class-properties , proposal-object-rest-spread
• Babel version: @babel/core = 7.9.6
• Webpack version: 4.43.0

How do I make Babel stop doing this?

Answer 1

I fixed this by setting the modules option of preset-env to false .