1

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.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
Alex MacArthur
  • 2,220
  • 1
  • 18
  • 22
  • regeneratorRuntime is undefined, use: https://babeljs.io/docs/en/babel-plugin-transform-runtime – Arber Sylejmani Nov 30 '18 at 19:52
  • I am using that already. `@babel/plugin-transform-runtime` is referenced in my `package.json` as well as my `.babelrc`. – Alex MacArthur Nov 30 '18 at 19:54
  • @AlexMacArthur The runtime needs to go in the compiled output, it shouldn't be a *dev*dependeny I think. – Bergi Nov 30 '18 at 22:43
  • This article covers this matter in depth https://link.medium.com/JS0UfDQghS – aquiseb Nov 30 '18 at 22:46
  • Thank you all! As it turns out, I migrated fro Rollup to Webpack, and that appeared to solve my problem, even with the same dependencies. I'm sure it was something strange with my rollup.config.js file, but I'm fine with using Webpack instead. – Alex MacArthur Dec 01 '18 at 02:56

1 Answers1

-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
    }]
  ]
}
Benjamín Vázquez
  • 340
  • 2
  • 12