Dwight Watson's blog

Supporting Safari (ES5) with Rails JS bundling/eslint

This blog post was originally published a little while ago. Please consider that it may no longer be relevant or even accurate.

I recently replaced Webpacker v6 in a Rails app with the new standard of jsbundling-rails using eslint. Turned out to be a lucky change as well considering that Rails have abandoned Webpacker without shipping a v6.0 release.

Shortly after shipping this change we started receiving customer feedback from users running iOS 13 or desktop Safari 13 - it appeared that JavaScript functionality was totally broken. It turns out that these versions of Safari were choking on ES6 code, and Webpacker clearly was transpiling it backwards as required.

Luckily, esbuild has an option called target which allows you to specify browser vendors/version combinations that need to be supported. I suppose this is similar to browserlist (which Webpacker used). This makes it easy to add support for Safari 13 back with just --target=safari13 in the package.json scripts.

"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --target=safari13"

A blog about Laravel & Rails by Dwight Watson;

Picture of Dwight Watson

Follow me on Twitter, or GitHub.