Search code examples
vue.jsecmascript-6internet-explorer-11babeljsbabel-polyfill

Object doesn't support property or method 'replace' on Internet Explorer 11


I am trying to make my Vuejs application work on IE11. However, one node module (vue-directive-tooltip) throw an error on IE11:

Object doesn't support property or methode "replace"

The module is supposed to be IE11 compatible. I have tried to require the polyfill I need at the top of the entry point to my application. I have also tried to add the node module to the transpile dependencies.

vue.config.js:

require("@babel/polyfill");

configureWebpack: {
  entry: ["@babel/polyfill", path.resolve(__dirname, "./src/main.js")],
}

babel.config.js:

module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [ ">0.25%"]
        },
        "useBuiltIns": "entry",
        "debug": true
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread"
  ]
};

I expect the vue-directive-tooltip to work on IE11, but the actual output is the following error message:

SCRIPT438: Object doesn't support property or method 'replace'.


Solution

  • Adding the classList.js reference in the index.html was the solution.