When using fortawesome, script5017 syntax error occurs in internet explorer 11

Question

The console error message is like under this statement

script5017 syntax error in regular expression

chunk-vendors.js (96290,5)

chunk-vendors.js

!*** ./node_modules/core-js/modules/es.regexp.constructor.js ***!
...
result = inheritIfRequired(NativeRegExp(pattern, flags), thisIsRegExp ? this : RegExpPrototype, RegExpWrapper); // line 96290
...

main.js

import 'core-js/stable'
import "core-js/es/symbol";
import 'regenerator-runtime/runtime'
import 'intersection-observer' // Optional
import Vue from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// fontawesome 6.1.1
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

library.add(
  fas,
  far
)

I use BootstrapVue too. I feel sometimes BootstrapVue makes some conflicts with fortawesome. Sometimes it is not loaded well when I used BootstrapVue with even in chrome. So I added the statement about it in this source

Anyway, I don't know why js isn't loaded by script 5017 error happens. Can this be core-js error or BootstrapVue error?

I used

@fortawesome/fontawesome-common-types 6.1.1

@fortawesome/vue-fontawesome 2.0.6

core-js 3.20.2

bootstrap 4.6.1

bootstrap-vue 2.21.2

Answer 1

It looks like you're using Font Awesome 6, which does not support IE11 any more.
You could downgrade to Font Awesome 5, which does.

Your package.json should look something like this:

{
  "devDependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.36",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/vue-fontawesome": "^0.1.10",
  },
  "resolutions": {
    "@fortawesome/fontawesome-svg-core": "1.2.36"
  }
}

Then update with yarn or npm i.

Note versions "core" <1.3 + *-icons =5.15.4 + vue-fontawesome <1, which correspond to "Font Awesome < 6", as far as I could tell.

The resolutions part might not be necessary, but I had a hard time convincing yarn to actually downgrade below 1.3.0, for whatever reason.
You might want to check node_modules/@fortawesome/fontawesome-svg-core/package.json to confirm the installed version.

The issue is indeed the missing support for Unicode RegExes in IE11, which Font Awesome 6 relies on.

I've spent some time trying to make it work with @babel/plugin-proposal-unicode-property-regex to no success.