Next.js引入socket.io-client后IE11报SCRIPT1002语法错误如何解决

你遇到的报错是因为IE11不支持ES6箭头函数等高级语法，Next.js默认不会转译node_modules目录下的代码，而socket.io-client及其依赖的debug、engine.io-client等包都未提供ES5版本产物，所以会在IE11下触发语法错误。而之前的CRA默认会对所有node_modules依赖做ES5转译，所以原有项目运行正常。

不需要转译整个node_modules目录，会大幅降低构建速度，推荐按优先级尝试以下方案：

方案1：使用socket.io-client预构建的ES5版本（最推荐，一步到位） #

socket.io-client官方已经提供了打包好的全量ES5产物，直接引入即可跳过所有依赖转译步骤：

• 修改引入语句，把原有引入

  import { io } from 'socket.io-client'
  

  替换为

  import { io } from 'socket.io-client/dist/socket.io.es5.min.js'
  

• 如果不想修改所有引入语句，可以在next.config.js中配置别名统一替换：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    webpack: (config) => {
      config.resolve.alias['socket.io-client'] = 'socket.io-client/dist/socket.io.es5.min.js'
      return config
    }
  }
  module.exports = nextConfig
  

方案2：批量转译socket.io全链路依赖 #

如果需要保留未打包的源码引入方式，可以把socket.io-client相关的所有依赖一次性加入转译列表，不用逐个踩坑添加：

1. 安装next-transpile-modules依赖
2. 修改next.config.js配置：

   const withTM = require('next-transpile-modules')([
     'socket.io-client',
     'engine.io-client',
     'debug',
     'ws',
     'socket.io-parser',
     'engine.io-parser',
     'base64id'
   ])
   
   module.exports = withTM({
     // 其他Next.js配置
     experimental: {
       // Next.js 12+用SWC转译时开启IE11兼容
       legacyBrowsers: true,
       browsersListForSwc: true
     }
   })
   

3. 确保package.json中添加了IE11的浏览器适配声明：

   {
     "browserslist": ["IE 11", "last 2 versions", "> 0.2%", "not dead"]
   }
   

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