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.

[itanxiao]

It works in nextjs 15, thanks

[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

[manudeli]

#6705 (reply in thread)

[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',
  ],
};

[runnez]

Have a similar issue with webpack + babel but it's producing this error

ERROR in ./node_modules/@tanstack/query-core/build/modern/focusManager.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: /Users/andrey/projects/wallet/wallet-react-form/node_modules/@tanstack/query-core/build/modern/focusManager.js: Unexpected helper format.
    at permuteHelperAST (/Users/andrey/projects/wallet/wallet-react-form/node_modules/@babel/core/node_modules/@babel/helpers/lib/index.js:165:11)
    at Object.build (/Users/andrey/projects/wallet/wallet-react-form/node_modules/@babel/core/node_modules/@babel/helpers/lib/index.js:213:9)
    at Object.get (/Users/andrey/projects/wallet/wallet-react-form/node_modules/@babel/core/node_modules/@babel/helpers/lib/index.js:228:27)
    at File.addHelper (/Users/andrey/projects/wallet/wallet-react-form/node_modules/@babel/core/lib/transformation/file/file.js:158:19)
    at File.addHelper (/Users/andrey/projects/wallet/wallet-react-form/node_modules/@babel/core/lib/transformation/file/file.js:153:32)
    at Object.<anonymous> (/Users/andrey/projects/wallet/wallet-react-form/node_modules/@babel/preset-env/node_modules/@babel/helper-create-class-features-plugin/lib/fields.js:402:46)

[runnez]

Browserslist

defaults
ChromeAndroid>=80
ios_saf>=14
safari>=14

[manudeli]

I want to recommend Suspensive. In my opinion, you can avoid this issue by using @suspensive/react-query with @tanstack/react-query v4. You can use useSuspenseQuery, useSuspenseQueries, useSuspenseInfiniteQuery, queryOptions, infiniteQueryOptions with @tanstack/react-query v4 by Suspensive interfaces

https://suspensive.org/docs/react-query/motivation

Then, You can use most of the interfaces of TanStack Query v5 while supporting the browser compatibility of TanStack Query v4.

[YangHaoDiii]

Does anyone know how to configure this in vite please?

[ghost]

@YangHaoDiii

This setup ensures that the build works in legacy browsers like IE11, and can easily be adapted for Vite since Vite uses Rollup internally for production builds.

rollup.config.js

export default {
  plugins: [
    commonjs(),

    babel({
      babelHelpers: 'runtime',
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      include: ['**/@tanstack/**'],
      plugins: [
        [
          '@babel/plugin-transform-runtime',
          {
            corejs: 3,
          },
        ],
      ],
      presets: [
        [
          '@babel/preset-env',
          {
            bugfixes: true,
            modules: false,
            useBuiltIns: 'usage',
            targets: 'ie >= 11',
            corejs: 3,
          },
        ],
      ],
    }),

    // Replace plugin to handle the "use client" text replacement
    replace({
      preventAssignment: true,
      'use client': '',
    }),
    
    // ...
  ],
};

[konekoya]

Spent quite some time on this and I eventually resolved it by using webpack + babel

We just happen to use nx, it's not part of the solution

module.exports = composePlugins(withNx(), withReact(), (config) => {
  config.module.rules.push({
    test: /\.(js|ts|tsx)$/,
    include: [path.resolve(__dirname, '../../node_modules/@tanstack')],
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          [
            '@babel/preset-env',
            {
              targets: 'last 5 years, not dead',
              useBuiltIns: 'usage',
              corejs: '3',
              loose: false,
            },
          ],
          '@babel/preset-react',
        ],
      },
    },
  });
});