Unable to Transpile Async/Await for Browser with Babel 7

Question

I'm trying to transpile async/await statements to use in the browser (as far back as IE11). I'm using Rollup and Babel 7, but keep getting errors in Chrome when I actually run the code. I feel like it's related to the plugins and/or their configuration, but have come to a standstill.

Here's my .babelrc file:

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-transform-runtime"
  ]
}

And here the packages I have installed:

  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-transform-async-to-generator": "^7.1.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "babel-jest": "^21.2.0",
    "concurrently": "^3.5.1",
    "express": "^4.16.2",
    "jest-cli": "^21.2.1",
    "prettier": "^1.15.3",
    "rollup": "^0.67.3",
    "rollup-plugin-babel": "^4.0.3",
    "rollup-plugin-uglify": "^3.0.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.1.5"
  }

In the browser, I keep getting this error:

Uncaught TypeError: Cannot read property 'mark' of undefined

... which is being traced back to a line in my code that looks like this:

_regeneratorRuntime.mark(function _callee2() {

I don't think I need to import something like Babel polyfill, due to what I've read on how I'm implementing everything, but I could be wrong. Any direction would be much appreciated.

Answer 1

From this answer https://stackoverflow.com/a/36821986/9816567 , it recommends you using this config on the transform-runtime plugin

{
  "plugins": [
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}