React使用socket.io-client时报read only property 'exports'错误如何解决？

该问题由react-scripts@4.x的webpack默认配置导致：webpack会将识别为ES模块的文件中的module.exports属性设为只读，而socket.io-client@4.3.1的打包产物混用了ES模块语法和CommonJS导出规则，因此触发了该限制，报错来自依赖包本身的导出逻辑，无需直接修改依赖源码。

• 方案1：降级socket.io-client版本
  4.3.x版本存在打包兼容问题，降级到4.2.0即可正常运行，执行以下命令：

  npm uninstall socket.io-client
  npm install socket.io-client@4.2.0
  

• 方案2：调整导入语法
  不使用默认导入，改为命名导入可绕开导出冲突，将原导入代码：

  import io from 'socket.io-client'
  

  替换为：

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

• 方案3：修改webpack模块识别规则
  若需保留当前socket.io-client版本，可通过react-app-rewired修改webpack配置，开启模块类型自动识别：
  1. 安装所需开发依赖：

  npm install react-app-rewired customize-cra --save-dev
  

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

  const { override, adjustWebpackConfig } = require('customize-cra');
  
  module.exports = override(
    adjustWebpackConfig((config) => {
      config.module.rules.forEach(rule => {
        if (rule.test.toString().includes('jsx|mjs|js|ts|tsx')) {
          rule.parser = { ...rule.parser, sourceType: 'unambiguous' };
        }
      });
      return config;
    })
  );
  

  3. 修改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"
  }
  

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