Cannot read property 'helpers' of undefined

[swymmwys]

Hi.
I got a following error: 'Cannot read property 'helpers' of undefined.'
Hope anyone can help with that.

Also I got a #7110 without "plugins" in my .babelrc.

.babelrc, package.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "last 2 versions"
          ]
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

{
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.36",
    "@babel/core": "^7.0.0-beta.36",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.36",
    "@babel/preset-env": "^7.0.0-beta.36"
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0-beta.36"
  }
}

Error

Cannot read property 'helpers' of undefined at _default node_modules\@babel\plugin-transform-runtime\lib\index.js:17:25)

[babel-bot]

Hey @swymmwys! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[nicolo-ribaudo]

How are you running Babel?

[swymmwys]

@nicolo-ribaudo
I using parcel-bundler wich run babel under the hood

[xtuc]

As far as I can see parcel is using Babel 6 and you are using Babel 7 plugins.

Could you please try to downgrade the plugins you're using?

The other error is also probably due to that incompatibility between those versions.

[swymmwys]

@xtuc
Yes, version downgrade helps, build complete successfully.
Now .babelrs and package.json looks like this

  "devDependencies": {
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1"
  },
  "dependencies": {
    "babel-runtime": "^6.26.0"
  }

{
  "presets": ["env"],
  "plugins": ["transform-async-to-generator", "transform-runtime"]
}

But I have an error when trying to run my app.

ReferenceError: regeneratorRuntime is not defined

I know, what a lot of topics already exist on the web about this issue.
But I really confused about what I should do to work with 'async/await' syntax in my app.
I will be very appreciate if some one can help me with that.
Thanks.

[nicolo-ribaudo]

You should include babel-polyfill in your bundle

[swymmwys]

@nicolo-ribaudo
But I'm already using babel-plugin-transform-runtime instead of babel-polyfill.
Or they are not interchangeable?

[nicolo-ribaudo]

Mh yes, they should be.
Can you provide some code (both the input and the transpiled output) which shows the issue?

[swymmwys]

input

export default class Page {
    constructor(url) {
        this._url = `src/app/pages/${url}`;
        this.html = "";
    }

    async load() {
        if (this.html) return this.html;

        return fetch(this._url).then(html => this.html = html);
    }
}

output

var Page = function () {
  function Page(url) {
    _classCallCheck(this, Page);

    this._url = "src/app/pages/" + url;
    this.html = "";
  }

  _createClass(Page, [{
    key: "load",
    value: function () {
      var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
        var _this = this;

        return regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                if (!this.html) {
                  _context.next = 2;
                  break;
                }

                return _context.abrupt("return", this.html);

              case 2:
                return _context.abrupt("return", fetch(this._url).then(function (html) {
                  return _this.html = html;
                }));

              case 3:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function load() {
        return _ref.apply(this, arguments);
      }

      return load;
    }()
  }]);

  return Page;
}();

[xtuc]

But I'm already using babel-plugin-transform-runtime instead of babel-polyfill.
Or they are not interchangeable?

No, the async-to-generator plugin requires regeneratorRuntime and its runtime which is available in babel-polyfilll.

See https://babeljs.io/docs/usage/polyfill/.

Could you please also send us the imports in your file?

[swymmwys]

@xtuc
Yes, now it's works correctly.
Thanks.
But should I always import the babel-polifill or maybe exist alternative approach?

[xtuc]

Actually Nicolo is right, babel-plugin-transform-runtime should include it (modulo the config).

I can dig into this once I get to my computer.

[nicolo-ribaudo]

@swymmwys I tested your code with Babel 6 (without using parcel) and it works

Output

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _regenerator = require("babel-runtime/regenerator");

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require("babel-runtime/helpers/asyncToGenerator");

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Page = function () {
    function Page(url) {
        (0, _classCallCheck3.default)(this, Page);

        this._url = "src/app/pages/" + url;
        this.html = "";
    }

    (0, _createClass3.default)(Page, [{
        key: "load",
        value: function () {
            var _ref = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
                var _this = this;

                return _regenerator2.default.wrap(function _callee$(_context) {
                    while (1) {
                        switch (_context.prev = _context.next) {
                            case 0:
                                if (!this.html) {
                                    _context.next = 2;
                                    break;
                                }

                                return _context.abrupt("return", this.html);

                            case 2:
                                return _context.abrupt("return", fetch(this._url).then(function (html) {
                                    return _this.html = html;
                                }));

                            case 3:
                            case "end":
                                return _context.stop();
                        }
                    }
                }, _callee, this);
            }));

            function load() {
                return _ref.apply(this, arguments);
            }

            return load;
        }()
    }]);
    return Page;
}();

exports.default = Page;

I don't know Parcel so I don't know what the issue could help. As a workaround, you can include regenerator-runtime/runtime in your entry point.

[swymmwys]

@nicolo-ribaudo
Can you please share your .babelrc and dependencies from package.json that you are using?

[nicolo-ribaudo]

@swymmwys I also tested it with parcel and it works 🤔 Can you setup a repository wchich reproduces the issue?

My .babelrc

{
  "presets": ["env"],
  "plugins": ["transform-runtime"]
}

My package.json

{
  "name": "babel-issue-7193",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "parcel-bundler": "^1.4.1"
  }
}

PS. async-to-generator is included in preset-env, so you don't need to specify it in .babelrc

[xtuc]

FYI @swymmwys parcel-bundler/parcel#475

[swymmwys]

@nicolo-ribaudo
I also had tryed to reinstal all my dependencies and after that all is worked fine.
Perhaps it's because I was trying to many solution to solve my issue from the begining and I just had polluted node_modules with different versions of different packages. And parcel just don't know what to choose or something like that.

@nicolo-ribaudo @xtuc
Thanks for you support. Very appreciate.

[fengyun2]

If you're using babel-loader@7, which is what is automatically installed, along with @babel/core beta, try use babel-loader@^8.0.0-beta.0.

yarn add --dev babel-loader@^8.0.0-beta.0

Cannot read property 'helpers' of undefined with babel and webapck