Plugin transform-runtime generates incorrect commonjs wrapper

[lwr]

Webpack Version: 5.89.0

Babel Core Version: 7.23.3

Babel Loader Version: 9.1.3

Configuration / minimal case

• package.json

  {
      "devDependencies" : {
          "webpack"                         : "5",
          "@babel/core"                     : "7",
          "@babel/preset-env"               : "7",
          "@babel/plugin-transform-runtime" : "7",
          "babel-loader"                    : "9"
      }
  }

• build.js (webpack.config)

  require('webpack')({
      mode    : 'development',
      devtool : false,
      module  : {
          rules : [{
              test : /\.js$/,
              use  : {
                  loader  : 'babel-loader',
                  options : {
                      presets : [['@babel/env', {loose : true}]],
                      plugins : ['@babel/transform-runtime'],
                  },
              },
          }],
      },
  }, (err, stats) => {
      console.log(stats.toString({colors : true}));
  });

• src.js

  require('./foo').foo();

• foo.js

  exports.foo = async x => x;

Current behavior (corrupted)

after running node build.js, the output dist/main.js do not translate cjs exports correctly

// dist/main.js
// ... ...
/*!****************!*\
  !*** ./foo.js ***!
  \****************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ "./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js");
/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js");
/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__);

exports.foo = /*#__PURE__*/function () {
  var _ref // = ...;
  return function (_x) {
    return _ref.apply(this, arguments);
  };
}();

/***/ }) // ...

We will have ReferencError: Can't find variable: exports while running.

Expected / analysing

The exports in output module foo.js is badly referenced as __webpack_exports__.

Either remove @babel/preser-env or @babel/plugin-transform-runtime from babel options can resolve
this problem.

// dist/main.js
// ... ...
/*!****************!*\
  !*** ./foo.js ***!
  \****************/
/***/ ((__unused_webpack_module, exports) => {
    
exports.foo = async x => x;

/***/ }) // ...

[lwr]

problems in @babel/plugin-transform-runtime injecting import statements to a cjs module which leading to corruption

It should correct the prediction of the actual module type and then injects requires instead of imports

[JLHwung]

By default, Babel assumes users are authoring ES Modules, where accessing exports from global this will throw unless it has been defined, unlike CJS.

Please specify sourceType: "script" so transform-runtime will inject require() as runtime imports.

require('webpack')({
    mode    : 'development',
    devtool : false,
    module  : {
        rules : [{
            test : /\.js$/,
            use  : {
                loader  : 'babel-loader',
                options : {
+                   sourceType: "script",
                    presets : [['@babel/env', {loose : true}]],
                    plugins : ['@babel/transform-runtime'],
                },
            },
        }],
    },
}, (err, stats) => {
    console.log(stats.toString({colors : true}));
});