Dwight Watson's blog

Supporting Safari (ES5) with Rails JS bundling/eslint

January 26, 2022

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;
developer of Roomies.com, myRent.co.nz, High School Notes & StudentVIP.com.au.

Follow me on Twitter, or GitHub.