Missing polyfill 'Includes' IE 11

[fernandoagarcia]

Using version 1.2.2 and I seem to get the following error on IE 11

object doesn't support property or method 'includes'

Vue-cli usually automatically includes missing polyfills except for this one. Is there a way to resolve the issue so I can get this to work on IE 11?

[davestewart]

Ah, sorry about that!

Most likely the String method; I'll look to polyfill that.

In the meantime, I guess add this to your project:

if (!String.prototype.includes) {
  String.prototype.includes = function (value) { return this.indexOf(value) > -1; }
}

Can you see if adding that works?

[fernandoagarcia]

@davestewart yes that worked. Had to add it in the template HTML before all the bundled files. Thank you!

[davestewart]

Thanks for the ticket. I'll get that added in a future release :)

[bkarlson]

I cannot find, has it been incorporated yet? Many releases since then, and seems like an easy fix.

P.S. thanks a ton for this plugin, worked wonders with simplyfing vuex-related codebase!

[davestewart]

Hey @bkarlson - not added yet, but I'm going to go through all outstanding tickets next week and I'll add this then.

P.S. Glad you are enjoying it!

[JessicaSachs]

Just bit me :-)

Working around it w Babel’s core-js polyfills, which have to pollute the window to polyfill factory functions on String, Array, etc...

Hoping that one of our partners doesn’t do something weird with String.includes that we’ll mess up 🙏

When you implement the permanent fix, it’d be cool if you used a method that didn’t mutate String’s prototype. 🙇‍♀

[davestewart]

Hey @JessicaSachs

You got an issue with the polyfill?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes#Polyfill

[JessicaSachs]

The actual code in the polyfill is fine. Globally mutating String is an issue for us. If it were a local function that vuex-pathify could use, that would be optimal.

[davestewart]

Globally mutating String is an issue for us

How come?

[JessicaSachs]

Because as a vendor/plugin, the websites we run on also mutate String. Sometimes their polyfills’ code relies on an incorrect implementation of String.includes

Widely popular pre-Babel library “MooTools” is particularly bad at writing incorrect implementations of polyfills. Lots of websites in developing worlds tend to use older tech and we can break their website if we stomp on window’s String/Array/etc

Babel has a lot of content on why global polyfills are bad... which is why they wrote a whole toolchain to enable local polyfilling via require/imports.

[JessicaSachs]

Think of Vue — no global polyfills needed. Runs anywhere without side affects. That’s ideal. I’m happy to put in a PR swapping out includes with the es5, local polyfill from MDN.

Thanks for hearing me out 🙇‍♀

[davestewart]

Fair point!

OK, I'll create an includes() helper or just let folks do it themselves.

[davestewart]

Looks like a straightforward rx replace:

([\w.]+)\.includes\((.+?)\)
includes($1, $2)

[JessicaSachs]

Closing the loop on this... I released the global polyfill and modifying String.includes started throwing errors on one of our major partner sites: Cannot redefine non-configurable property 'includes'

I had to take out vuex-pathify while you (or I, lemme know if you need me to make code changes) apply the fix you described above.

[chenweihuan]

I had the same problem and solved it ,add the following configuration If you're using Vue.

// vue.config.js
module.exports = {
  transpileDependencies: [
    'vuex-pathify'
  ]
}

If you use this scheme, you don't have to write polyfill yourself.