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

[maprox]

Environment

Nuxt project info:

---

• Operating System: Windows_NT
• Node Version: v18.19.0
• Nuxt Version: 3.9.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: npm@10.3.0
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-ezocff

Describe the bug

After upgrading nuxt to 3.7.0 (in particular destr to 2.0.2) ofetch starts to fail on Safari < 15.4 with message:

TypeError: e.at is not a function. (In 'e.at(-1)', 'e.at' is undefined)

It can be reproduced on Safari < 15.4

Additional context

As I understand the reason is an updated destr dependency from 2.0.1 to 2.0.2 which introduced at(-1) in the codebase: unjs/destr@v2.0.1...v2.0.2#diff-a2a171449d862fe29692ce031981047d7ab755ae7f84c707aef80701b3ea0c80

As a quick fix I override its version in package.json as

"override": {
  "destr": "2.0.1"
}

Trying to set something like this in my nuxt.config.ts doesn't help:

export default defineNuxtConfig({
  vite: {
      build: {
          target: 'es2021'
      },
      esbuild: {
          target: 'es2021'
      },
      optimizeDeps: {
          esbuildOptions: {
              target: 'es2021'
          }
      }
  },
  build: {
      transpile: [
          'destr'
      ]
  }
})

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-ezocff (Open reproduction)

[manniL]

Because String.at/Array.at are only supported since Safari 15.4.

The topic of supporting legacy browser was covered a few times, e.g. in #20087, #19328 and #15464

Instead of transpiling back, you could also try adding a polyfill for Array.at instead 😊

[maprox]

Because String.at/Array.at are only supported since Safari 15.4.

The topic of supporting legacy browser was covered a few times, e.g. in #20087, #19328 and #15464

Instead of transpiling back, you could also try adding a polyfill for Array.at instead 😊

Thanks, manniL!

So there is no way to change the target?
I guest I'll have to do a polyfill in this case.

Afaics 3.7.0 https://github.com/nuxt/nuxt/releases/tag/v3.7.0 says nothing about dropping support for Safari 15.
Is it usually done without any notifications?

I see that nuxt states 2 most recent versions https://nuxt.com/blog/v3#the-browser-and-nodejs-support
But I thought it uses vite config https://vitejs.dev/guide/build.html#browser-compatibility

[manniL]

So there is no way to change the target? I guest I'll have to do a polyfill in this case.

As mentioned, there are various ways (you tried quite some of them as you shown before). Eventually, we want to support a top-level target option to make it easier but so far this is not implemented.

Is it usually done without any notifications?

No

I see that nuxt states 2 most recent versions nuxt.com/blog/v3#the-browser-and-nodejs-support

From the docs: "The core browser set targets the 2 most recent major versions of Chrome, Firefox, and Edge on a monthly basis and Safari on a yearly basis."