Object doesn't support property or method 'matches' on Edge

Question

I'm using gulp and babel to transcript ES6 into ES5. Here is my code:

gulpfile.babel.js

import gulp from 'gulp';
import babel from 'gulp-babel';
gulp.src([appDir + 'js/**/*.js', '!' + appDir + 'js/{vendors,vendors/**}'])
        .pipe(babel({
            presets: ['es2015'],
            plugins: ['transform-runtime']
        }))
        .pipe(gulp.dest(devDir + 'js'));

package.json

"devDependencies": {
    "babel-core": "*",
    "babel-plugin-transform-runtime": "*",
    "babel-preset-es2015": "*",
    "gulp": "*",
    "gulp-babel": "*",
  }

.babelrc

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

Everything works fine on every browser except IE11 and Edge.

IE11 has error:

'Symbol' is undefined

Edge has error:

Object doesn't support property or method 'matches'

I hope that adding this plugin "plugins": ["transform-es2015-typeof-symbol"] into .babelrc file will solve the 'Symbol' is undefined problem but not!

Am I missing some special settings or transform plugin for babel?

Answer 1

You'll need to load https://cdnjs.com/libraries/babel-polyfill from a CDN since you are not using a module bundler. I'd just drop

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>

into your page before your other JS files.

As for your error about matches you'll have to figure that out by looking at your code. Code using Element#matches will not work on older IE versions because the method either does not exist or goes by a different name.