如何在Next.js 13(SWC)中扩展TanStack Query v4旧浏览器支持？

要将你的Next.js 13应用（基于SWC）的TanStack Query v4支持范围扩展到5-10年前的浏览器，需要解决两个核心问题：转译node_modules中的TanStack Query库和添加必要的Polyfills，以下是具体实现步骤：

一、转译TanStack Query库 #

Next.js默认不会转译node_modules中的第三方库，而TanStack Query v4的代码使用了现代JavaScript语法，旧浏览器无法识别。你需要在next.config.js中配置让SWC转译该库：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 指定需要转译的包
  transpilePackages: ['@tanstack/react-query'],
  swcMinify: true, // 启用SWC压缩，确保转译后的代码优化
}

module.exports = nextConfig

二、添加Polyfills补充旧浏览器缺失的API #

旧浏览器（如IE11、Chrome 50等）缺少ES6+的核心API（比如Promise、Array.prototype.includes、Fetch等），需要通过Polyfills补充。推荐使用SWC的运行时插件配合core-js实现自动注入：

1. 先安装依赖：

npm install @swc/plugin-transform-runtime core-js@3

2. 在next.config.js中配置SWC插件：

const nextConfig = {
  transpilePackages: ['@tanstack/react-query'],
  swcMinify: true,
  experimental: {
    swcPlugins: [
      ['@swc/plugin-transform-runtime', {
        corejs: 3, // 启用core-js@3提供的polyfills
        helpers: true,
        regenerator: true,
      }],
    ],
  },
}

module.exports = nextConfig

3. 补充Fetch Polyfill（可选）：
   如果需要支持完全没有Fetch API的浏览器（如IE11），可以在_app.tsx/_app.jsx的顶部导入Fetch Polyfill：

import 'isomorphic-fetch';

三、指定目标浏览器范围 #

你可以在package.json中通过browserslist明确目标浏览器，让SWC自动适配转译和Polyfill的范围：

"browserslist": [
  "> 0.2%",
  "last 10 versions",
  "not dead",
  "IE 11"
]

相关背景说明 #

TanStack Query官方文档提到：

根据你的环境，可能需要添加polyfills。如果要支持旧浏览器，你需要自行转译node_modules中的库。

其默认支持的浏览器版本为2019-2020年发布的版本：

Chrome >= 73
Firefox >= 78
Edge >= 79
Safari >= 12.0
iOS >= 12.0
opera >= 53

通过以上配置，无需手动测试即可覆盖5-10年前的主流浏览器需求。

内容的提问来源于stack exchange，提问作者Yash Sonalia