Next.js not fully functional on Safari for iOS 12

[bordeo]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant packages:
      next: 13.3.1-canary.16
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/gracious-zhukovsky-pf41xq

To Reproduce

Access https://nextjs.org/ or https://pf41xq-34085.csb.app/ using Safari on iOS 12 and launch DevTools.

Describe the Bug

@next/react-dev-overlay throw a SyntaxError: Unexpected token '.'

Next.js documentation says it support safari 12+ but it doesn't. https://nextjs.org/docs/basic-features/supported-browsers-features

A possible solution is to change the compilation target of @next/react-dev-overlay here

Expected Behavior

Next.js should work on Safari 12, just like it does on other browsers.

Which browser are you using? (if relevant)

Safari for iOS 12

How are you deploying your application? (if relevant)

No response

[DB-Alex]

We are experiencing the same!

[inthisar-hamza]

same error!

[thomasgauvin]

I also can't get NextJS working on Safari 12 for iOS. Perhaps the Safari version mentioned in https://nextjs.org/docs/basic-features/supported-browsers-features refers to the desktop version

[shuding]

Note that @next/react-dev-overlay is included in dev mode only so this won't affect production.

[bordeo]

Note that @next/react-dev-overlay is included in dev mode only so this won't affect production.

Thanks for the clarification. The same exception can be observed in the production of https://nextjs.org/, indicating that it may not originate from @next/react-dev-overlay.

The exceptions shown in the screenshots are preventing JavaScript from functioning properly, such as preventing the menu from being opened.

[bordeo]

This comment confirms that it's not working.
@shuding, as you said @next/react-dev-overlay may not be the issue.

[BjoernRave]

did you find any solution for this problem, I am experiencing the same, where I only see a white screen on ios 12

[BjoernRave]

so next.js 12 works fine for me, but 13 doesnt, I didnt test any minor version in between however, just latest nextjs 13 and latest nextjs 12

[slimshreydy]

same issue for us too. https://nextjs.org/ seems to fail in an iOS safari 13 browser when tested with browserstack...

(It does work in iOS safari 15 on browserstack, so this is not a browserstack issue)

[inthisar-hamza]

In My case, It's because of some library fault, so Check your libraries and it's compatibility with Next.js. Just try to remove, test, and add again each individual library. Maybe It can Next.js issue but we need to confirm that and give proper reproduce steps of the issue to Next.js Team.

…

On Thu, Jun 29, 2023 at 2:25 AM Shrey Gupta ***@***.***> wrote: same issue for us too. https://nextjs.org/ seems to fail in an iOS safari 13 browser when tested with browserstack... (It does work in iOS safari 15 on browserstack, so this is not a browserstack issue) — Reply to this email directly, view it on GitHub <#48627 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADEQRSOVYEHJTQFIKJ2PE63XNSK5HANCNFSM6AAAAAAXFN5HIM> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[galaxynova1999]

add next/dist/compiled/@next/react-dev-overlay to transpilePackages will solve this problem

[V-iktor]

add next/dist/compiled/@next/react-dev-overlay to transpilePackages will solve this problem

I doubt react-dev-overlay is running at https://nextjs.org - production builds do not work on iOS 12

Tested on iPad Air 1st gen iOS 12.5.7

[itdat]

add next/dist/compiled/@next/react-dev-overlay to transpilePackages will solve this problem

This doesn't work for me. Tested on iPhone 6 iOS 12.4.3. Is there another solution, please?

[galaxynova1999]

add next/dist/compiled/@next/react-dev-overlay to transpilePackages will solve this problem

This doesn't work for me. Tested on iPhone 6 iOS 12.4.3. Is there another solution, please?

I tested on iPhone 6 Plus with iOS 12.5.3 + Next v13.4.16, it works.

did you set browserslist target properly?

"browserslist": [
    "> 0.5%",
    "not dead",
    "ios >= 10",
    "chrome >= 49",
    "not ie <= 11"
  ]

const isDev = process.env.NODE_ENV === 'development';

const getTranspilePackages = () => {
  const sharedPackages = [
    'antd-mobile',
    'ahooks',
    '@react-spring/web',
    'classnames',
    // https://github.com/sindresorhus/filter-obj/issues/31
    'filter-obj',
    'query-string',
  ];
  if (isDev) {
    // https://github.com/vercel/next.js/issues/48627
    return sharedPackages.concat(['next/dist/compiled/@next/react-dev-overlay']);
  }

  return sharedPackages;
};

[V-iktor]

did you set browserslist target properly?

"browserslist": [
    "> 0.5%",
    "not dead",
    "ios >= 10",
    "chrome >= 49",
    "not ie <= 11"
  ]

That is not the problem, see https://nextjs.org/docs/architecture/supported-browsers#browserslist

Next.js uses the following Browserslist configuration by default:

{
  "browserslist": [
    "chrome 64",
    "edge 79",
    "firefox 67",
    "opera 51",
    "safari 12"
  ]
}

If you do not get the error on iOS 12 in your project like the error on https://nextjs.org it likely means that you are not using the Next code that causes the error.

[V-iktor]

I checked the console on my iPad and it is failing because it does not support resize detection.

Would be nice if it would fail more gracefully.

[DB-Alex]

Hi @V-iktor can you send a part of the code which is failing?

[V-iktor]

Hi @V-iktor can you send a part of the code which is failing?

Here it is: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

[DB-Alex]

Where is this included in next?

[V-iktor]

Where is this included in next?

It is not. Next should not fail like this when it encounters an error though.

[tgrassl]

This is still an issue with Next 14 in dev and production. You can see it even on the vercel.com website.

[brunorzn]

I can confirm this is an issue and we have it in production. Any workaround ?

[Jnwy]

I used the workaround transpilePackages: ['next'] in next.config.js to resolve this issue.

[lyyuta]

We are bombarded by SyntaxError: Unexpected token '.' errors on ios 12

[tayan-serna]

In my case, this error was caused by @tanstack/react-query. I hope this comment saves some minutes of anyone's life.

[OscarJVD]

same error

[brunorzn]

both Next and Vercel are still down on iPhone 11 for instance.

transpilePackages: ['next'] doesn't solve anything.

Any plan to fix this ?!

[meotimdihia]

I think we should skip iOS 12 because there are not many users.

[nguyenchauhuyen]

next/link does not work in safari of ipadOS 16

[pivot-dennis]

next/link does not work in safari of ipadOS 16

i have the same issues on iPadOS15.8.3 , i m working with tailwind 4.0 and next js 14.2 . Did you solve it and if yes, how did you do it ?
I think all my css is failing and the link with preload too. the only error i get is the following one : has an invalid imagesrcset value

[bordeo]

no, I'm sorry, I didn't solve it

[zhaoweihan]

We are bombarded by SyntaxError: Unexpected token '.' errors on ios 12

Have you solved the problem