webpack: Using `externals` as `script` generate unexpected code

Bug report

What is the current behavior?

Resulting bundle contains unexpected non-es5 instruction: async/await, arrow function; that does not match expected target, e.g., having defaults target browserslist with android 36, result:


module.exports = (async () => {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var foo_bar__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(299);
foo_bar__WEBPACK_IMPORTED_MODULE_0__ = await Promise.resolve(foo_bar__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var foo_bar__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(foo_bar__WEBPACK_IMPORTED_MODULE_0__);

foo_bar__WEBPACK_IMPORTED_MODULE_0___default()();

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["myLib"] = factory();
	else
		root["myLib"] = factory();
})(globalThis, function() {
return /******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ 5579:
/***/ ((module, __webpack_exports__, __webpack_require__) => {

"use strict";
module.exports = (async () => {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1539);
/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var core_js_modules_es_promise_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8674);
/* harmony import */ var core_js_modules_es_promise_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_promise_js__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var regenerator_runtime_runtime_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5666);
/* harmony import */ var regenerator_runtime_runtime_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(regenerator_runtime_runtime_js__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var foo_bar__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5299);
foo_bar__WEBPACK_IMPORTED_MODULE_3__ = await Promise.resolve(foo_bar__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var foo_bar__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(foo_bar__WEBPACK_IMPORTED_MODULE_3__);


function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }


foo_bar__WEBPACK_IMPORTED_MODULE_3___default()();

/*
  skip other code

Added following core-js polyfills:
  es.object.to-string { "android":"36" }
  es.promise { "android":"36" }

Based on your code and targets, added regenerator-runtime.
*/
});

STR

Configure webpack to resolve some package as external via script

    externalsType: "script",
    externals: {
      'foo-bar': 'FooBar@https://example.com/foo-bar.js'
    },

Configure target via target: ['web', 'es5'] or via browserslist:

  "browserslist": [
    "android >= 36"
  ],

Run on code:

import Foo from 'foo-bar';

Foo();

(async () => {
  await Promise.resolve();
})();

What is the expected behavior?

Resulting bundle does not contains unexpected instruction. Expecting to have bundle where all code match expected target, via target: [‘web’, es5’]` or default, based on browserslist, as same as transpiled source.

Other relevant information: webpack version: 5.16.0 Node.js version: 14

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 28 (14 by maintainers)

Most upvoted comments

@aoisummer Please read our docs, you need polyfills for IE 11

alexander-akait on Mar 16, 2021

@williamjacobszoon you should use dynamic import (import()) then… As I said transforming top-level-await (async/await => promises) is not possible in current webpack design…

maybe you can use babel for this (for es5 builds transform chunks after compiling…)

vankop on Apr 13, 2022

I found a similar problem:

// Generated code in dev mode

/* webpack/runtime/async module */
// ...
var obj = { [webpackThen]: function(fn, reject) { queueFunction(queue, fn), dep.catch(reject); } };

This is a ES6 method, may not be compatible with target: ['web', 'es5']

webpack: 5.26.0 node: 14.16.0 browser: IE 11

aoisummer on Mar 16, 2021

Been having a similar issue, but in my case its only effecting the vendor modules which are being bundled as my main code is written in TS, which compiles to es5 correctly.

using target: [“web”, “es5”] doesn’t help either.

webpack 5.11.1

Mjinx on Jan 26, 2021