Next.js项目IE11运行报错SCRIPT1002: Syntax error问题求助

1. 语法兼容问题：IE11不支持ES6箭头函数语法，你报错位置的debug包代码使用了箭头函数编写，IE11加载到该语法时直接抛出SCRIPT1002语法错误。
2. 框架转译规则差异：CRA默认会将node_modules下的第三方依赖的ES6+语法统一转译为ES5，而Next.js默认仅转译项目自身编写的代码（pages、components等业务目录），不会主动处理node_modules内的第三方包代码，未转译的ES6语法直接流入IE11就会触发报错。
3. 依赖版本差异：你原有CRA项目依赖的debug包为v3及以下版本，该版本没有使用箭头函数语法兼容IE11；迁移后socket.io-client拉取的是v4+版本的debug包，该版本引入了箭头函数语法，导致兼容问题。

• 方案1：配置Next.js转译指定第三方依赖
  如果你使用Next.js 13.1及以上版本，直接在next.config.js中添加transpilePackages配置，将需要转译的包加入列表即可：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    transpilePackages: ['debug', 'socket.io-client'],
    // 其他原有配置保持不变
  }
  module.exports = nextConfig
  

  如果你使用13.1以下的旧版本Next.js，安装next-transpile-modules插件完成配置：

  const withTM = require('next-transpile-modules')(['debug', 'socket.io-client']);
  module.exports = withTM({
    // 其他原有配置保持不变
  })
  

  如果配置后还有其他第三方包的语法报错，可以把对应包也添加到转译列表中。

• 方案2：强制锁定debug包为兼容版本
  直接安装兼容IE11的v3版本debug包，执行命令：
  npm i debug@3.x
  也可以在package.json中配置版本锁定规则，强制socket.io-client依赖的debug包使用v3版本：
  如果你使用yarn，添加如下配置：

  "resolutions": {
    "debug": "^3.2.7"
  }
  

  如果你使用npm≥8.3版本，添加如下配置：

  "overrides": {
    "debug": "^3.2.7"
  }
  

  配置完成后重新安装依赖即可生效。

• 方案3：补充Babel兼容配置
  检查你的Babel配置文件（babel.config.json或.babelrc），确保preset-env的适配目标包含IE11，并且配置了polyfill兜底：

  {
    "presets": [
      ["next/babel", {
        "preset-env": {
          "targets": {
            "ie": "11"
          },
          "useBuiltIns": "usage",
          "corejs": 3
        }
      }]
    ]
  }
  

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