'@tanstack/react-query' does not work in Safari 14

[kostia1st]

Describe the bug

Well, once you open your application that makes use of react-query, a JS error gets immediately thrown, no more other JS is executing on the page from that point, React is basically dead. Depending on your error-handling settings, you might also see the error across the screen, like this:

Reads:

SyntaxError: Unexpected private name #setOptions. Cannot parse class method with private name.

Your minimal, reproducible example

https://codesandbox.io/s/naughty-wind-zc3qs6?file=/src/App.tsx

Steps to reproduce

1. Run the app in the codesandbox
2. Open it in Safari 14 (I personally used lambdatest for that).
3. Observe the error.

Expected behavior

No errors thrown.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• MacOS Big Sur
• Safari 14
• "@tanstack/react-query": "5.8.3"

Tanstack Query adapter

react-query

TanStack Query version

5.8.3

TypeScript version

4.4.2

Additional context

No response

[TkDodo]

this is expected. as the requirements state, we only support safari>=15

https://tanstack.com/query/v5/docs/react/installation#requirements

That's because v5 uses private class fields, an ES feature old browsers don't know about. Safari 15 is from September 20, 2021. If you need to support older browsers, you need to instruct your bundler to transpile react-query from within node_modules.

[kostia1st]

Thanks, I see.

Well, at least now there's a page on the internet where people can quickly find out why their site broke right after upgrade.

[TkDodo]

it's also in the migration docs btw: https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#supported-browsers

[mareksuscak]

@TkDodo We just ran into this too. IMO Safari 14 is not that old to ignore it. Would you consider producing a bundle that'd be compatible with slightly older browsers like Safari 14?

[TkDodo]

Safari 15 is from September 20, 2021. That's almost 2.5 years ago. If you must support older browsers, please tweak your bundlers or stay on v4 until you can upgrade.

[mareksuscak]

Thanks for your reply @TkDodo. I'll see if it's possible to tweak Next to support older versions of Safari via the browserslist. I don't think it compiles dependencies from node_modules out of the box but it may be configurable via the transpilePackages option. Otherwise, I'd expect it to work since Next supports Safari 12+ but likely requires additional configuration.

As a side note, the average lifespan of an iPhone is 3-4 years according to some stats I found on the internet. I assume most users would upgrade but not all of them so 2.5 may not be a long enough period to give users to adjust to new standards which means questions like this may keep popping up for some time. I get your argument though - older browsers are not supported out of the box when it's easier to rely on the transpilers doing their job which is fine. Long gone are the days when had to support 15-year-old IE6 :) We could likely add a reference on how to tweak Next correctly for those who want to use the bleeding edge version of RQ but need to support older browsers so I'll see if we can make it work and submit a contribution if we find a way if you're interested.

[TkDodo]

transpilePackages: ['@tanstack/react-query', '@tanstack/query-core']

seems like it could be exactly what you want

so I'll see if we can make it work and submit a contribution if we find a way if you're interested.

absolutely, thank you 🙏

[kostia1st]

transpilePackages: ['@tanstack/react-query', '@tanstack/query-core']

seems like it could be exactly what you want

You may also consider adding '@tanstack/react-query-devtools' to the list if you use one.

[mareksuscak]

Thanks! I meant to get back - it worked for us! Trying to find time to put up a PR to update the documentation.

[stuible]

transpilePackages: ['@tanstack/react-query', '@tanstack/query-core']

seems like it could be exactly what you want

You may also consider adding '@tanstack/react-query-devtools' to the list if you use one.

I've been struggling to get react-query to successfully transpile in Next.js, adding these two packages causes the following client-side error in our production code:

TypeError: (intermediate value)(intermediate value)(intermediate value) is not a function
    at n.setEventListener (focusManager.js:34:22)
    at n.onSubscribe (focusManager.js:23:12)
    at n.subscribe (subscribable.js:9:10)

This error appears to be related to a private class but happens even on modern Chrome once I add it to the transpilePackages array. Have you seen anything like this before?

[Malien]

Also found out that if you are using vite, you are all set. It transpiles private properties of deps automagically.