Guide how to transpile @tanstack/react-query v5 for old browsers in official docs could be better DX

[manudeli]

I knew there is no plan to support for old browsers in react-query v5, to use es private field
https://tanstack.com/query/latest/docs/react/installation#requirements

but there is some text to support v5 for old browsers

Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from node_modules yourselves.

If you know how to transpile it for old browsers, could you share it please?

We already use a lot of time to support v5 for old browsers by transpiling but we couldn't.(we tried transpilePackages field of next.config.js to do it correctly ) I think if that text is there, specific guide in docs will be also good for library users

cc. @sungh0lim @zillako

[TkDodo]

If you know how to transpile it for old browsers, could you share it please?

depends on which bundler you're using. Most bundlers traverse your imports and then use a loader to handle them. Everything in node_modules is usually excluded per default, so I'd just tweak whatever loads js/ts files to have them include the path to tanstack-query in the node_modules directory, too.

[reorx]

I recently encountered an incompatibility issue with react-query on iOS 13. Here's how I resolved it in Next.js:

// next.config.js
const nextConfig = {
  transpilePackages: [
    '@tanstack/react-query', '@tanstack/query-core',
  ],

Not sure if it's the best way, but it works.

[reorx]

Out of curiosity, what language features primarily cause the incompatibility? The only thing that comes to my mind is "fetch," but it has been widely supported since Safari 10.1.

[nicolas-chalet-wmx]

Private methods and private property in object

[nicolas-chalet-wmx]

Hi, I came across some related issue.

I had to add this babel plugin to make it work : @babel/plugin-transform-private-methods

[kakao-kay-gw]

my environment is webpack and yarn berry.
I solved issue with adding babel-loader exclude setting

exclude:  {
  and: [/.yarn/],
  not: [
    /.yarn\/cache\/@tanstack/,
  ]
}

[tiamed]

For webpack I use this config rule

webpack.config.js

{
  test: /\.(js|ts)$/,
  exclude: /node_modules\/(?!(\@tanstack\/query-core)\/).*/,
  use: [
    {
      loader: 'babel-loader',
    },
  ],
}

babel.config.js

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    '@babel/plugin-proposal-private-methods',
  ],
};