nuxt: Nuxt 3 not working on iOS <= 12

Environment

Operating System: Darwin
Node Version: v14.20.1
Nuxt Version: 3.2.2
Nitro Version: 2.2.3
Package Manager: pnpm@7.28.0
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

Created a minimal reproduction on stackblitz, while the problem is, that stackblitz (and codesandbox) does not work on iOS (12). So I hope this is not a problem!

But basically all you need to do is installing Nuxt 3 and open the page with an iOS device on iOS 12 or below.

In the stackblitz example above, I’ve created this simple counter app, to demonstrate, that no interaction works (on iOS <=12):

<template>
  <div>
    <!-- <NuxtWelcome /> -->
    <h1>count: {{ count }}</h1>
    <button @click="count++">+</button>
  </div>
</template>

<script setup>
const count = ref(0);
</script>

But the same error occurs, when you stay with the default app.vue (<NuxtWelcome />).

Describe the bug

First: I think this is the same bug as described here, but somehow the issue was closed. No, not vite: I’ve tested it, and it has nothing to do with vite as builder, because I’ve tested it also with webpack as builder and you can verify this too by trying it with webpack. And if you have a look at can i use (es6-module, dynamic-import, import.meta), vite is supported on iOS 12.

Here is a video of the app running on an iPad with iOS 12 (via browserstack.com):

https://user-images.githubusercontent.com/2291224/221809915-5077d637-f7e0-45b4-bbc6-e90d473373a9.mp4

As you can see, the problem is that an error is thrown, that stops the app from working (both vite and webpack):

SyntaxError: Unexpected token '?'       (program):1
promiseReactionJob @ (program):1

Safari on iOS 12 (from 2018/19) is still a relevant browser with 0.42%, as you can see on usage tables. So I hope we can fix this!

About this issue

Original URL
State: closed
Created a year ago
Reactions: 1
Comments: 22 (7 by maintainers)

Most upvoted comments

To clarify, we are talking about iPhone 5S, iPhone 6/6 Plus and iPod touch (6th generation), i.e. 2015 and older devices (or ones that didn’t update).

It can make sense to precisely track the library/feature that is causing the failure, although it must be noted that we are talking about 8-years-ago internet, and it might not be worth changing them.

P.s. Note also that Vue 3 requires ES2015, i.e. iOS 10.x+

ennioVisco on Feb 28, 2023

To clarify, we are talking about iPhone 5S, iPhone 6/6 Plus and iPod touch (6th generation), i.e. 2015 and older devices (or ones that didn’t update).

It can make sense to precisely track the library/feature that is causing the failure, although it must be noted that we are talking about 8-years-ago internet, and it might not be worth changing them.

P.s. Note also that Vue 3 requires ES2015, i.e. iOS 10.x+

I really do not know where you found this information, but it simply is not true. iOS 12 (as mentioned above) was released in September 2018 and of course, it is still relevant.

I apologize if the message was received badly, I didn’t want to say that it’s not relevant in any way!

I was just clarifying the affected devices. It has been released in September 2018, but all the devices except the ones I mentioned (and the older ones) could be updated to iOS13, according to Wikipedia.

Alright. Now I’ve got your point.

Well, I don’t think that we can expect our website users to update their devices to a version, on which Nuxt 3 runs …

JonathanDoelan on Feb 28, 2023

how to resolve globalThis in safari 11 with nuxt 3 please

ReferenceError: Can’t find variable: globalThis

@lww555 (How) Did you solve this issue? In a new app I am also getting this error with globalThis …

Hi, I resolved an issue using the following approach. You may check an example of my nuxt.config.

So, you may add as many polyfills as required by your concrete case. In dev tools (console) you will see errors. Most likely, they could be solved by polyfills.

Pay attention, that your polyfill must be loaded before nuxt/vue application is bootstrapped. Also, it should be run on browser (not on your server)

Good luck 😃

export default defineNuxtConfig({
  devtools: { enabled: false },
  devServer: {
    port: 3000,
    host: '0.0.0.0'
  },
  app: {
    head: {
      script: [
         {
           src: 'https://polyfill.io/v3/polyfill.min.js?features=globalThis'
         }
       ],
    }
  },
  vite: {
    build: {
      target: ['es2015', 'chrome87', 'safari12']
    }
  },
})

kirylvarykau on Feb 20, 2024

I’m using this in my nuxt.config.js

vite: {
  build: {
    target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari12' ],
  }
}

The default value of vite.build.target is safari14 which require atleast iOS 14, change it to safari12 makes my app able to run on iOS 12.

@vitejs/plugin-legacy also works (#20087) but it will increase the javascript file size by atleast 1MB and it will introduce System is not defined error (https://github.com/vitejs/vite/discussions/6581).

duc2019 on Jul 28, 2023

To clarify, we are talking about iPhone 5S, iPhone 6/6 Plus and iPod touch (6th generation), i.e. 2015 and older devices (or ones that didn’t update).

It can make sense to precisely track the library/feature that is causing the failure, although it must be noted that we are talking about 8-years-ago internet, and it might not be worth changing them.

P.s. Note also that Vue 3 requires ES2015, i.e. iOS 10.x+

I really do not know where you found this information, but it simply is not true. iOS 12 (as mentioned above) was released in September 2018 and of course, it is still relevant.

JonathanDoelan on Feb 28, 2023