TanStack React Query DevTools安装后启动服务器报错求助

问题详情 #

启动服务器时触发如下错误：
./node_modules/@tanstack/match-sorter-utils/build/umd/index.production.js 504:47
模块解析失败：Unexpected token (504:47)
已使用以下加载器处理该文件：

• ./node_modules/babel-loader/lib/index.js
  可能需要额外加载器来处理这些加载器的输出结果。
  出错代码行：

if ((t = t || {}).threshold = t.threshold ?? o.MATCHES, !t.accessors) {

解决方案 #

错误根源是@tanstack/match-sorter-utils使用了ES2020的空值合并运算符??，但你的Babel配置未对该node_modules包做转译处理，导致babel-loader无法解析该语法。可按以下步骤修复：

• 调整Babel转译范围
  在项目根目录的babel.config.js或.babelrc中，将@tanstack/match-sorter-utils加入需要转译的依赖列表：

  module.exports = {
    // 原有配置...
    include: [
      /src/,
      /@tanstack\/match-sorter-utils/
    ]
  }
  

  若用webpack配置，也可在module.rules的babel-loader规则里修改include/exclude，确保该包被纳入转译范围。

• 补充Babel插件（适配低版本Babel）
  若你的Babel版本低于7.8.0，需手动安装并启用空值合并运算符插件：
  安装命令：

  npm install @babel/plugin-proposal-nullish-coalescing-operator --save-dev
  

  配置启用：

  module.exports = {
    plugins: [
      '@babel/plugin-proposal-nullish-coalescing-operator'
    ]
  }
  

• 升级Babel核心依赖
  直接将@babel/core升级到7.8.0及以上版本，该版本默认支持空值合并运算符，无需额外插件：

  npm update @babel/core @babel/preset-env
  

• 清理缓存后重启服务

  rm -rf node_modules/.cache
  npm start
  

内容的提问来源于stack exchange，提问作者VG-P