javascriptecmascript-6internet-explorer-11grunt-babel

Make ES6 Internet Explorer 11 compliant using Grunt-Babel


I installed grunt-babel in order to allow IE 11 users on our site. Right now the site is broken for those users. I've been mostly successful except I've gotten the following error that I don't know how to address.

ReferenceError: regeneratorRuntime is not defined

It looks like polyfills are deprecated so I'm wondering what is the best solution.

EDIT Following justDan and David's advice, I installed regenerator/runtime package and am now getting an error require is not defined

This code will be run through the browser. My company is using a custom CMS which requires us to compress the theme file and there are large sections requiring dynamically populated text which is part of the reason for using ES6 template literals.

package.json file

{
  "name": "Some Site",
  "version": "1.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "dependencies": {
    "regenerator-runtime": "^0.13.3"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "babel-preset-es2015-nostrict": "^6.6.2",
    "grunt": "^1.0.4",
    "grunt-autoprefixer": "^3.0.4",
    "grunt-babel": "^8.0.0",
    "grunt-contrib-compress": "^1.5.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-cssmin": "^3.0.0",
    "grunt-contrib-imagemin": "^3.1.0",
    "grunt-contrib-less": "^2.0.0",
    "grunt-contrib-uglify": "^4.0.1",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-purifycss": "^0.1.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

.babelrc file

{
  "presets": ["@babel/preset-env"]
}

Solution

  • You need to install and run this package

    https://www.npmjs.com/package/regenerator-runtime