search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.05k stars 26.71k forks source link

Next.js not fully functional on Safari for iOS 12 #48627

Open bordeo opened 1 year ago

bordeo commented 1 year ago

Verify 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

Screenshot 2023-04-20 at 14 22 18

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 commented 1 year ago

We are experiencing the same!

inthisar-hamza commented 1 year ago

same error!

thomasgauvin commented 1 year ago

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 commented 1 year ago

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

bordeo commented 1 year ago

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.

Screenshot 2023-05-04 at 08 43 07

bordeo commented 1 year ago

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

BjoernRave commented 1 year ago

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

BjoernRave commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 https://github.com/vercel/next.js/issues/48627#issuecomment-1612093288, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADEQRSOVYEHJTQFIKJ2PE63XNSK5HANCNFSM6AAAAAAXFN5HIM . You are receiving this because you commented.Message ID: <vercel/next. @.***>

galaxynova1999 commented 1 year ago

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

V-iktor commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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;
};

IMG_0011

V-iktor commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

V-iktor commented 1 year ago

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 commented 1 year ago

Where is this included in next?

V-iktor commented 1 year ago

Where is this included in next?

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

tgrassl commented 10 months ago

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

brunorzn commented 10 months ago

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

Jnwy commented 8 months ago

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

lyyuta commented 5 months ago

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

image
tayan-serna commented 4 months ago

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

OscarJVD commented 4 months ago

same error

brunorzn commented 4 months ago

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

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

Capture d’écran 2024-05-21 à 13 58 11

Any plan to fix this ?!

meotimdihia commented 4 months ago

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