Unable to set property 'wrap' of undefined or null reference

Question

I'm building a bundle with webpack + babel for browser, targeting it to ES5. When I try to use it, an error Unable to set property 'wrap' of undefined or null reference appears. It worked normally when I was building the bundle without using babel, so probably something is wrong with my config/plugins I use

webpack.config.js

module.exports = {
    entry: ['./index.js'],
    module: {
        rules: [{
            // Only run `.js` files through Babel
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["@babel/preset-env"],
                    plugins: [
                        [
                            '@babel/plugin-proposal-decorators',
                            {
                                legacy: true,
                            },
                        ],
                        '@babel/plugin-proposal-class-properties',
                        [
                            '@babel/plugin-transform-runtime',
                            {
                                regenerator: true,
                            },
                        ],
                    ],
                }
            }
        }]
    },
    resolve: {
        modules: ['./node_modules']
    },
    optimization: {
        minimize: false
    },
    output: {
        filename: 'test.bundle.js',
        library: 'test',
    },
    node: {
        tls: "empty",
        fs: "empty",
        net: "empty"
    }
};

dependencies:

...
"devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-decorators": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "acorn": "^8.0.4",
    "babel-loader": "^8.1.0",
    "babel-polyfill": "^6.26.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  },
...

stack trace

Uncaught TypeError: Cannot set property 'wrap' of undefined
    at test.bundle.js:6818
    at Module.<anonymous> (schemarama.bundle.js:7472)
    at Module.<anonymous> (schemarama.bundle.js:7492)
    at __webpack_require__ (schemarama.bundle.js:21)
    at Object.<anonymous> (schemarama.bundle.js:237)
    at __webpack_require__ (schemarama.bundle.js:21)
    at Module.<anonymous> (schemarama.bundle.js:6509)
    at Module.<anonymous> (schemarama.bundle.js:6758)
    at __webpack_require__ (schemarama.bundle.js:21)
    at Object.<anonymous> (schemarama.bundle.js:6496)

place in the bundle that causes the error (last line) + wrap definition

var runtime = function (exports) {
  "use strict";

  var Op = Object.prototype;
  var hasOwn = Op.hasOwnProperty;
  var undefined; // More compressible than void 0.

  var $Symbol = typeof Symbol === "function" ? Symbol : {};
  var iteratorSymbol = $Symbol.iterator || "@@iterator";
  var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
  var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";

  function define(obj, key, value) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
    return obj[key];
  }

  try {
    // IE 8 has a broken Object.defineProperty that only works on DOM objects.
    define({}, "");
  } catch (err) {
    define = function define(obj, key, value) {
      return obj[key] = value;
    };
  }

  function wrap(innerFn, outerFn, self, tryLocsList) {
    // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
    var generator = Object.create(protoGenerator.prototype);
    var context = new Context(tryLocsList || []); // The ._invoke method unifies the implementations of the .next,
    // .throw, and .return methods.

    generator._invoke = makeInvokeMethod(innerFn, self, context);
    return generator;
  }

  exports.wrap = wrap; 

Thank you in advance for any help :)

Answer 1

Obviously this is a pretty dated question but the problem still persists.

I have no clue why, but the bug originates from the plugin "@babel/plugin-transform-runtime"

To fix the problem, you have to turn helpers off:

[
  '@babel/plugin-transform-runtime',
    {
      helpers: false,
      regenerator: true
    }
]

It uses a bit more space to not have the helpers on, but until I can find a working solution (or get a bug report up) this is by far the best way to solve the problem. The other way is to inline polyfills and runtime generator:

import "regenerator-runtime/runtime"; // this is equivalent to @babel/plugin-transform-runtime
import "core-js/stable"; // if polyfills are also needed

You would put these at the entry of your app/library, but it uses WAAY more memory, whereas dropping helpers for me only added a few kB.

Answer 2

I had the same issue lately so I'm leaving this answer might come handy for anyone searching through web. it's really simple fix that whenever you don't exclude the node_module directory form the webpack babel-loader options it would throw this kind of error.simply add the exclude option:

              {
                  loader: 'babel-loader',
                  options: {
                     presets: ['@babel/preset-env'],
                     plugins: [
                        '@babel/plugin-transform-runtime',
                     ],
                     exclude: [/node_modules/],//this is what removes the error
                  },
               },