Next.js 12删除.babelrc后出现TypeScript/JSX报错如何解决？

报错根因 #

Next.js 12 移除.babelrc后默认启用SWC编译器替代Babel，SWC解析.tsx文件时会优先把<>符号识别为JSX标签，你代码里用的老式TypeScript尖括号类型断言和这个规则冲突，所以抛出语法错误。

不需要恢复.babelrc的修复方法 #

• 首选方案：把所有尖括号类型断言换成as语法
  这也是TS官方推荐的写法，不会和JSX语法产生任何冲突，改完直接生效。修改示例：
  原第一类报错代码：

  const breakdown = <BreakdownItem>get(cart, 'breakdown', {});
  

  修改后：

  const breakdown = get(cart, 'breakdown', {}) as BreakdownItem;
  

  原第二类报错代码：

  return <ConfigReturn>{treatment, treatmentConfig, isLoaded, isError};
  

  修改后：

  return {treatment, treatmentConfig, isLoaded, isError} as ConfigReturn;
  

• 备选方案：不想改代码的话调整文件后缀
  如果某段代码只用了尖括号断言、没有JSX内容，可以把对应文件的后缀从.tsx改成.ts，SWC不会对.ts文件做JSX解析，自然不会触发冲突。同时确认tsconfig.json的compilerOptions.jsx字段设置为react-jsx即可。

构建速度变慢的说明 #

第一次用SWC构建时会生成缓存适配文件，速度会比Babel慢一些，跑1-2次全量构建之后缓存生效，SWC的构建速度会比Babel快30%以上，项目越大提升越明显。

内容的提问来源于stack exchange，提问作者james emanon