React使用socket.io-client运行时报exports只读属性赋值错误

根因说明 #

该报错由react-scripts@4.0.3内置的Webpack 4.44.2对ESM/CommonJS混合导出的兼容逻辑，与socket.io-client@4.2.0及以上版本的打包产物不匹配触发，属于构建工具与第三方依赖的规范兼容性问题，无需修改socket.io-client源码即可修复。

修复方案（按优先级从高到低尝试） #

• 方案1：调整导入语法
  将原有默认导入写法：

  import io from 'socket.io-client'
  

  替换为命名导入或者全量导入：

  // 优先试命名导入
  import { io } from 'socket.io-client'
  // 命名导入无效再试全量导入
  import * as io from 'socket.io-client'
  

• 方案2：通过react-app-rewired扩展Babel兼容规则（无需eject项目）
  1. 安装开发依赖：

  npm install -D react-app-rewired customize-cra @babel/plugin-transform-modules-commonjs
  

  2. 修改package.json中的scripts配置，将所有react-scripts替换为react-app-rewired：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
  

  3. 项目根目录新建config-overrides.js文件，写入如下配置：

  const { override, addExternalBabelPlugin } = require('customize-cra');
  
  module.exports = override(
    // 转换第三方依赖的ES模块导出为CommonJS，解决混合导出报错
    addExternalBabelPlugin('@babel/plugin-transform-modules-commonjs')
  );
  

• 方案3：锁定socket.io-client到兼容版本
  在package.json中将socket.io-client的版本号固定为旧项目可正常运行的4.1.2，不要加版本前缀^或~：

  "dependencies": {
    "socket.io-client": "4.1.2"
  }
  

  配置完成后删除node_modules文件夹、package-lock.json/yarn.lock文件，重新执行依赖安装后重启服务即可。
• 若项目使用TypeScript，需确认tsconfig.json中开启以下配置：

  {
    "compilerOptions": {
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true
    }
  }
  

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