Vue CLI 3 / Webpack production build not working on older browsers: How to add browser support?

Question

How does Vue CLI 3 / Webpack handle support for older browsers? Basically my Vue app runs perfectly fine on an iPhone 7/8 and Chrome desktop (latest version). But when testing on an iPad 2 (iOS 9.?) it just displays the background from the css file and that's it - nothing else but a blank screen. This has happened on two completely separate web apps that I've made so far so I don't think it's a coding error. I'm thinking that I need to add something in the vue.config.js file to support older browsers? I can't see it being a css issue either because I'm not using grid or anything modern - just basic css which is autoprefixed anyway. Please comment with ANY ideas as to why it isn't working! Thanks

Answer 1

TL;DR:

Essentially my problem was that I didn't have Babel included in my Vue CLI 3 build step (package.json). The below instructions are targeted specifically towards using Vue CLI 3. Babel works with all Javascript but in my case it related to a Vue CLI 3 project.

1) What worked for me was adding the line:
"@vue/cli-plugin-babel": "^3.2.0",
to my package.json file under "devDependencies":

2) Creating a babel.config.js file in the root folder which contains:

module.exports = {
  presets: [
    '@vue/app'
  ]
}

3) Adding a browserslist config. This can be a stand-alone .browserslistrc or browserslist file, or in my case I added a "browserslist": key in my package.json file — like this:

"browserslist": [
  "defaults"
]

I used "defaults" in my particular case which is basically shorthand for:
"> 0.5%, last 2 versions, Firefox ESR, not dead"
But this value can be configured to suit which browsers you need to support. More details about configuring browserslist can be found on this website and this GitHub page.

Once I completed those 3 steps I had a fully working Vue web app working on an old iPad 2 running iOS 9, and essentially answering my original question above.

---

Expanded answer

I'm not sure why this question received downvotes as it is a common problem that will trip up a lot of newcomers to Vue or Webpack, or even just plain old vanilla Javascript. The problem being that if you use ES6/ES7/ES8 Javascript syntax then your code won't work in older browsers without transpiling it.

The main thing to note when using Vue CLI 3 to create and build a project is that it will, by default, use Webpack under the hood to compile your project when you run your build command. However, Webpack can be configured to build your project in a multitude of ways and one of those ways can include the use of Babel. In a nutshell Babel is a Javascript code transpiler and it allows you to use ES6/ES7/ES8 Javascript features/syntax that older browsers don't support (or new browsers don't support yet) and it will convert your code into plain old ES5 Javascript code that those older browsers will understand.

When creating a new project with Vue CLI 3 the default options will include the use of Babel which will automatically transpile your code during the build step. But me not really knowing what Babel was decided I didn't need it so I manually configured my project to not include Babel. This was my main mistake. Without Babel Webpack will just compile your code without transpiling it — i.e. if it's written using ES6/ES7/ES8 syntax then that's how it will stay. This is what essentially caused me the problem of my app not working on older browsers.

However, after much reading I solved my problem using the steps I described in the TL;DR above. This did the trick for me and I now have a Vue web app written using many ES6/ES7 features that runs flawlessly on an old iPad 2 running iOS 9.

So to sum up:

1) MOST IMPORTANTLY! - Make sure you have Babel included in your package.json file under devDependencies if you're using ES6/ES7/ES8 Javascript syntax and you need to support a wide range of browsers, including older ones.

2) Vue CLI 3 uses Babel by default to automatically transpile your ES6/ES7/ES8 Javascript code into familiar ES5 code that older browsers can understand. So if you use any newer Javascript syntax then Babel (or another Javascript transpiler) is a must if you want to support older browsers.

3) The default settings for Babel using Vue CLI 3 do not support ALL older browsers. You need to configure your .browserslistrc file or browserslist setting in your package.json file to include the browsers you need to support.

4) If you're still having trouble with your code not working on older browsers then check out this page for more information about Vue CLI 3 browser compatibility. You should also look at the dependencies that you're using in your project as they may be causing the problem and you may need to include a specific polyfill to add further support.

I hope this helps anyone who runs into the same problem as I did where their code didn't work on older browsers. Please share any thoughts or comments below in order to enhance this post and further educate myself and others about this specific topic. Thank you.