如何让Next.js 13+应用兼容IE11？解决SWC相关语法错误

Next.js 13官方已终止对IE11的原生支持，但可通过自定义配置强制转译ES6+语法、补充polyfill来实现兼容，以下是针对<SCRIPT1010: Expected identifier>和<SCRIPT1002: Syntax error>错误的具体解决步骤：

一、配置SWC转译目标到IE11 #

在项目根目录的next.config.js中添加SWC目标环境配置，强制将代码转译为IE11支持的ES5语法：

/** @type {import('next').NextConfig} */
const nextConfig = {
  swcMinify: true,
  experimental: {
    swcPlugins: [
      ['@swc/plugin-transform-target', {
        target: 'ie11',
        include: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
      }],
    ],
  },
}

module.exports = nextConfig

二、补充ES6+核心API的Polyfill #

IE11缺失大量ES6+原生API，需在_app.js/_app.tsx的最顶部导入必要的polyfill：

// 先安装依赖包：npm install core-js regenerator-runtime
import 'core-js/stable';
import 'regenerator-runtime/runtime';

三、转译未兼容的第三方依赖 #

多数npm包发布的是未转译的ES6+代码，需在next.config.js中指定需要强制转译的依赖包：

const nextConfig = {
  // 其他配置...
  transpilePackages: ['lodash-es', 'axios', '你的第三方依赖包名'],
}

可通过IE11控制台的错误信息定位具体未转译的包（错误提示中会出现对应包的路径）。

四、排查并修复代码中的不兼容语法 #

针对两种错误的常见原因及修复方式：

• <SCRIPT1010: Expected identifier>：

  • 移除类的私有字段（如#privateField），改用普通字段或闭包模拟私有属性
  • 避免使用动态导入import()语法，替换为静态导入；若必须使用，需额外引入动态导入的polyfill
  • 对象属性若使用关键字（如class），改为字符串键名形式（{ 'class': 'xxx' }）

• <SCRIPT1002: Syntax error>：

  • 将箭头函数替换为普通函数表达式
  • 把解构赋值改为传统的属性访问方式（如const { name } = obj改为const name = obj.name）
  • 模板字符串替换为字符串拼接（如${name}改为' ' + name）
  • 调整let/const的块级作用域使用，IE11对其支持不完善，必要时可临时改用var（不推荐长期使用，建议优先调整代码结构）

五、验证兼容效果 #

1. 启动开发服务器，用IE11访问页面，观察控制台错误
2. 针对每个错误定位对应的代码或依赖，重复上述步骤修复
3. 生产构建后，用IE11访问部署后的页面，确认无语法错误

内容的提问来源于stack exchange，提问作者A.A