Nuxt 3 not working on iOS <= 12 #19328

JonathanDoelan · 2023-02-28T09:31:09Z

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):

bug.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!

The text was updated successfully, but these errors were encountered:

ennioVisco · 2023-02-28T16:39:28Z

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+

JonathanDoelan · 2023-02-28T16:54:50Z

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.

ennioVisco · 2023-02-28T17:20:12Z

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.

JonathanDoelan · 2023-02-28T17:28:48Z

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 …

manniL · 2023-02-28T17:44:30Z

As noted in #12577 (comment), please follow along the issues for the vite legacy plugin.

Consolidating there 👍

PS - from the vite docs:

The production bundle assumes support for modern JavaScript. By default, Vite targets browsers which support the native ES Modules, native ESM dynamic import, and import.meta:

Chrome >=87
Firefox >=78
Safari >=14
Edge >=88

As a last note, happy to link #14893 and #11642 here

JonathanDoelan · 2023-02-28T17:51:30Z

@manniL Please read my issue once more, but carefully. It has nothing to do with vite and it has nothing todo with desktop safari.

Please reopen!

manniL · 2023-02-28T17:57:53Z

It has nothing todo with desktop safari

I never referred to Desktop safari here. But what you want is support for older browser versions (=legacy) that are not able to understand constructs like optional chaining or nullish coalescing.

It has nothing to do with vite

Not "directly" but somewhere you have to set up the level of transpilation (=target) - usually in an extra config or via bundler 😋

One more thing you can try is setting vite's build target to es2015 via:

export default defineNuxtConfig({
  vite: {
    build: {
      target: 'es2015'
    }
  }
})

manniL · 2023-02-28T18:16:16Z

Quickly ran the above mentioned config over a default nuxt setup and it should work fine 👍
no ?. in the file, except for y=40+(n.sensitive?.25:0) which is actually a ternary and won't throw issues.

Be aware though: You might want to add 3rd party libraries to build.transpile to ensure they will be transpiled too.

JonathanDoelan · 2023-02-28T20:16:08Z

@manniL Thanks a lot for checking again! Wow, this is great.

I will use the following solution according to https://esbuild.github.io/api/#target and https://esbuild.github.io/content-types/#javascript

    vite: {
        build: {
            target: ["esnext", "ios12"],
        },
    },

What do you mean by

Be aware though: You might want to add 3rd party libraries to build.transpile to ensure they will be transpiled too.

?

JonathanDoelan · 2023-02-28T20:17:18Z

Be aware though: You might want to add 3rd party libraries to build.transpile to ensure they will be transpiled too.

@manniL Oh, you mean, that it could be that 3rd party libs don’t support ios12, because they use modern syntax?

manniL · 2023-02-28T20:36:15Z

Be aware though: You might want to add 3rd party libraries to build.transpile to ensure they will be transpiled too.

@manniL Oh, you mean, that it could be that 3rd party libs don’t support ios12, because they use modern syntax?

I am not entirely sure but I think yes, this is a possible scenario.

ckhatton · 2023-03-07T21:00:08Z

This is great to hear. Some portable devices use NetFront, which is stuck on ES5 👀

ckhatton · 2023-03-07T22:31:10Z

Ar ok, unfortunately it is not possible to build for es5 😢 I guess I could drop Nuxt for a straight up Vue setup, and utilise browserlist.

[vite:esbuild-transpile] Transform failed with 9 errors:
_nuxt/app.config.!~{005}~.js:6:47: ERROR: Transforming default arguments to the configured target environment ("es5" + 2 overrides) is not supported yet

Transforming default arguments to the configured target environment ("es5" + 2 overrides) is not supported yet
4  |    return value !== null && typeof value === "object";
5  |  }
6  |  function _defu(baseObject, defaults, namespace = ".", merger) {
   |                                                 ^
7  |    if (!isObject(defaults)) {
8  |      return _defu(baseObject, {}, namespace, merger);

Transforming const to the configured target environment ("es5" + 2 overrides) is not supported yet
8  |      return _defu(baseObject, {}, namespace, merger);
9  |    }
10 |    const object = Object.assign({}, defaults);
   |    ^
11 |    for (const key in baseObject) {
12 |      if (key === "__proto__" || key === "constructor") {

Transforming const to the configured target environment ("es5" + 2 overrides) is not supported yet
9  |    }
10 |    const object = Object.assign({}, defaults);
11 |    for (const key in baseObject) {
   |         ^
12 |      if (key === "__proto__" || key === "constructor") {
13 |        continue;

Transforming const to the configured target environment ("es5" + 2 overrides) is not supported yet
13 |        continue;
14 |      }
15 |      const value = baseObject[key];
   |      ^
16 |      if (value === null || value === void 0) {
17 |        continue;

Transforming array spread to the configured target environment ("es5" + 2 overrides) is not supported yet
21 |      }
22 |      if (Array.isArray(value) && Array.isArray(object[key])) {
23 |        object[key] = [...value, ...object[key]];
   |                       ^
24 |      } else if (isObject(value) && isObject(object[key])) {
25 |        object[key] = _defu(

Transforming array spread to the configured target environment ("es5" + 2 overrides) is not supported yet
21 |      }
22 |      if (Array.isArray(value) && Array.isArray(object[key])) {
23 |        object[key] = [...value, ...object[key]];
   |                                 ^
24 |      } else if (isObject(value) && isObject(object[key])) {
25 |        object[key] = _defu(

Transforming rest arguments to the configured target environment ("es5" + 2 overrides) is not supported yet
36 |  }
37 |  function createDefu(merger) {
38 |    return (...arguments_) => (
   |            ^
39 |      // eslint-disable-next-line unicorn/no-array-reduce
40 |      arguments_.reduce((p, c) => _defu(p, c, "", merger), {})

Transforming const to the configured target environment ("es5" + 2 overrides) is not supported yet
40 |      arguments_.reduce((p, c) => _defu(p, c, "", merger), {})
41 |    );
42 |  }
   |    ^
43 |  const defuFn = createDefu((object, key, currentValue) => {
   |  ^
44 |    if (typeof object[key] !== "undefined" && typeof currentValue === "function") {

Transforming const to the configured target environment ("es5" + 2 overrides) is not supported yet
51 |    return useNuxtApp()._useHead(input, options);
52 |  }
53 |  
   |   ^
54 |  const inlineConfig = {};
   |  ^
55 |

manniL · 2023-03-08T09:43:55Z

@ckhatton ES5 has no proxy support (they came with ES2015, which is ES6), so it won't support Vue3 and Nuxt3

ckhatton · 2023-03-12T22:50:35Z

Ar ok, thank you for letting me know @manniL 👍

For anyone reading this, I reckon I will go with Nuxt 2, as it generates ES5 compatible code by default - I know it and Vue 2 will become EOL end of the year, but it will do for my simple needs 🤓

wood-liu92 · 2023-04-21T07:50:17Z

Have you solved your problem？ now i use nuxt3.1.2 in ios12 and i set

vite: {
 build: {
      // target: 'es2015'
      target: ["esnext", "ios12"],
    },
}

It still reports an error like this
ReferenceError: Can't find variable: globalThis
ReferenceError: Cannot access uninitialized variable.

duc2019 · 2023-07-28T03:02:46Z

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 (vitejs/vite#6581).

Ludidi · 2023-08-08T10:06:58Z

After i setup safari12, got this error

undefined is not a function (near '...Object.fromEntries...')

Is there any other solution?

JonathanDoelan · 2023-09-26T08:51:57Z

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 …

alejandro-valencia14 · 2023-10-26T21:58:13Z

how to resolve globalThis in safari 11 with nuxt 3 please

kirylvarykau · 2024-02-20T10:20:17Z

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']
    }
  },
})

oneyoung19 · 2024-05-08T09:39:15Z

简单说一下我的测试结果：
1、我这边的旧版本浏览器支持 ?. 操作符，但是不支持 ?? 操作符；
2、因此我设置了 vite 的相关配置：

// nuxt.config.js
export default defineNuxtConfig({
  vite: {
     target: ['es2015', 'ios12', 'chrome87', 'safari12']
  }
})

设置之后，打包之后的项目，运行正常。我没有遇见 globalThis 相关的报错。

obronov · 2024-05-31T13:13:37Z

I also had problems with globalThis and Object.fromEntries I fixed it

JonathanDoelan added 3.x pending triage labels Feb 28, 2023

manniL closed this as not planned Won't fix, can't repro, duplicate, stale Feb 28, 2023

This comment was marked as duplicate.

Sign in to view

This was referenced Jan 17, 2024

After updating to 3.7.0 Safari < 15.4 ofetch (useFetch) fails with "TypeError: e.at is not a function" in some cases #25253

Closed

Uncaught ReferenceError: globalThis is not defined in old browsers (Chrome 65) #25368

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nuxt 3 not working on iOS <= 12 #19328

Nuxt 3 not working on iOS <= 12 #19328

JonathanDoelan commented Feb 28, 2023 •

edited

ennioVisco commented Feb 28, 2023 •

edited

JonathanDoelan commented Feb 28, 2023

ennioVisco commented Feb 28, 2023

JonathanDoelan commented Feb 28, 2023

manniL commented Feb 28, 2023 •

edited

JonathanDoelan commented Feb 28, 2023

manniL commented Feb 28, 2023 •

edited

manniL commented Feb 28, 2023 •

edited

JonathanDoelan commented Feb 28, 2023

JonathanDoelan commented Feb 28, 2023

manniL commented Feb 28, 2023

ckhatton commented Mar 7, 2023

ckhatton commented Mar 7, 2023

manniL commented Mar 8, 2023

ckhatton commented Mar 12, 2023 •

edited

wood-liu92 commented Apr 21, 2023

duc2019 commented Jul 28, 2023 •

edited

Ludidi commented Aug 8, 2023

This comment was marked as duplicate.

JonathanDoelan commented Sep 26, 2023

alejandro-valencia14 commented Oct 26, 2023

kirylvarykau commented Feb 20, 2024

oneyoung19 commented May 8, 2024

obronov commented May 31, 2024

Nuxt 3 not working on iOS <= 12 #19328

Nuxt 3 not working on iOS <= 12 #19328

Comments

JonathanDoelan commented Feb 28, 2023 • edited

Environment

Reproduction

Describe the bug

ennioVisco commented Feb 28, 2023 • edited

JonathanDoelan commented Feb 28, 2023

ennioVisco commented Feb 28, 2023

JonathanDoelan commented Feb 28, 2023

manniL commented Feb 28, 2023 • edited

JonathanDoelan commented Feb 28, 2023

manniL commented Feb 28, 2023 • edited

manniL commented Feb 28, 2023 • edited

JonathanDoelan commented Feb 28, 2023

JonathanDoelan commented Feb 28, 2023

manniL commented Feb 28, 2023

ckhatton commented Mar 7, 2023

ckhatton commented Mar 7, 2023

manniL commented Mar 8, 2023

ckhatton commented Mar 12, 2023 • edited

wood-liu92 commented Apr 21, 2023

duc2019 commented Jul 28, 2023 • edited

Ludidi commented Aug 8, 2023

This comment was marked as duplicate.

JonathanDoelan commented Sep 26, 2023

alejandro-valencia14 commented Oct 26, 2023

kirylvarykau commented Feb 20, 2024

oneyoung19 commented May 8, 2024

obronov commented May 31, 2024

JonathanDoelan commented Feb 28, 2023 •

edited

ennioVisco commented Feb 28, 2023 •

edited

manniL commented Feb 28, 2023 •

edited

manniL commented Feb 28, 2023 •

edited

manniL commented Feb 28, 2023 •

edited

ckhatton commented Mar 12, 2023 •

edited

duc2019 commented Jul 28, 2023 •

edited