How to make a vuejs application work with IE 11 when using feathersjs

Question

When creating a standard vue app (using vue-cli v3.0) and including @feathersjs/feathers in order to implement a connection with a feathers API, I get an error with Internet Explorer 11 (SCRIPT1010: Expected identifier)

The bottom line is to find an easy way to solve issues like this, because on bigger projects one could easily find lots of library issues and sometimes is necessary to support at least one version of Internet Explorer (at least from the business point of view)

I read on feathers site (https://docs.feathersjs.com/api/client.html#module-loaders) that the library uses ES6 so in this case it must be transpiled in order to work in a browser like IE11.

So I tried this but had no luck at all:

// vue.config.js
module.exports = {
  baseUrl: '/',
  transpileDependencies: [
    '@feathers/commons',
    '@feathers/errors',
    '@feathers/feathers',
    'debug'
  ]
}

and got errors even in chrome: Uncaught ReferenceError: exports is not defined

I created a project to show this error: https://github.com/riescorp/vue-internet-explorer

One should be able to use IE11 for this app, even if it doesn't work fast or looks nice, but works.

Answer 1

I believe the process should be the same as following the directions on the Vuetify website in the section of this page titled "IE11 & Safari 9 support" (scroll to the bottom): https://vuetifyjs.com/en/getting-started/quick-start

I've not had to do anything else in my projects, that I can remember.

Answer 2

I finally manage to solve this issue.

This is the babel.config.js config that does the trick:

module.exports = {
  presets: ['@vue/app'],
  plugins: ['@babel/transform-modules-commonjs']
}

Also there was a typo in my vue.config.js it should look like this:

// vue.config.js
module.exports = {
  baseUrl: '/',
  transpileDependencies: [
    '@feathersjs',
    'debug'
  ]
}

Finally, when using feathers this line wouldn't work:

.configure(restClient.fetch(window.fetch))

so you can use import 'whatwg-fetch' to solve it (remember to install it npm i whatwg-fetch)