Safari 12 support is dropped when upgrading to inertiajs v1

[sicaboy]

Version:

Both installed in package.json

• "@inertiajs/inertia-vue3": "^0.6.0",
• "@inertiajs/vue3": "^1.0.11",

Describe the problem:

I'm upgrading inertiajs project from @inertiajs/inertia-vue3 to @inertiajs/vue3 I keep all other code as is, only change the following line, the Safari 12 support is dropped. Safari > 13 is working.

import { Head, Link } from '@inertiajs/inertia-vue3';

When changing @inertiajs/inertia-vue3 to @inertiajs/vue3, The maximum Safari supported version is Safari 13.x. But Safari 12.x cannot render the page. (Blank page with error "Unexpected token '.'")

Steps to reproduce:

• Add both @inertiajs/inertia-vue3 and @inertiajs/vue3 in package.json and run npm i
• Change

import { Head, Link } from '@inertiajs/inertia-vue3';

to

import { Head, Link } from '@inertiajs/vue3';

Result

The Safari 12 support is dropped. Safari > 13 is working.

[jessarcher]

Hi @sicaboy,

I'm not aware of anything in Safari 12 or Inertia v1 that would cause this, but I don't have access to a Mac (especially not one with Safari 12) to test it on.

Which bundler are you using? E.g. Vite, Mix/Webpack, etc. Does it happen in dev mode, build mode, or both?

Are you able to replicate the error using the playground app in this repo?

Can you also please provide the full error with the source and stack trace? The string "Unexpected token" doesn't seem to exist anywhere in Inertia itself, but it seems to exist in a number of dependencies, so I'm not sure where it's coming from.

[sicaboy]

Hi @jessarcher

Thanks for your reply. A safari 12 can be accessed from browserstack.com

I used both webpack (through Laravel mix) and Vite. I tried both dev mode and build(prod) mode.

• When using Vite, the default min supported Safari version is 14 as per disclosed on vite official website

• I switched to use Laravel mix (webpack) and it supports version Safari 13, but not Safari 12. I have tried browserlist and Laravel Mix Polyfill but they didn't work. I tried to debug and console error shows the Inertia vue3 has unexpected token "."

• Then I removed @inertiajs/vue3 and reinstalled @inertiajs/inertia-vue3 and changed app.js to use the old version and Safari 12 works.

Hope this helps.

[sicaboy]

Hi @jessarcher

I have created a fresh playground online.

I had a test on Safari 12 and 13. Here are the screenshot.

Safari 12:

Safari 13:

[jessarcher]

Thanks @sicaboy,

I tried Browsershot, but it only gave me one minute, and I couldn't find any information on which code was triggering the error. I can't determine whether it's caused by Inertia or a dependency.

Have you tried using https://github.com/vitejs/vite/tree/main/packages/plugin-legacy with Vite?

[sicaboy]

Hi @jessarcher

Yes I tried the legacy plugin and I can notice the js file got larger but still showing blank on Safari 12