React项目拆分package.json后嵌套node_modules引发导入错误求助

问题根源 #

你遇到的TypeError: Cannot assign to read only property 'exports' of object '#<Object>'报错，本质是项目混用了CommonJS模块规范（module.exports/require）和ES模块规范（export/import），不同安装路径下npm的模块解析规则不一致导致的冲突。
你从根目录安装依赖后移动到子目录可以正常运行，是因为npm模块解析会向上递归查找，根目录安装的依赖会被React默认构建配置识别为CommonJS兼容模式；而直接在client目录安装时缺少对应配置，构建工具会把部分依赖识别为严格ES模块，禁止使用module.exports赋值，就会触发报错。

解决步骤 #

• 第一步：检查client/package.json的配置
  如果文件中存在"type": "module"字段，直接删除该行。Create React App 默认构建环境兼容两种模块规范混用，加了这个字段会强制所有.js文件按ES模块解析，不允许module.exports赋值。
• 第二步：清理缓存重装依赖
  在client目录下依次执行以下命令：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  

• 第三步（自定义webpack配置适用）：添加Babel兼容配置
  如果你没有用CRA默认配置，而是自己搭建的webpack构建环境，需要在babel配置中添加sourceType: 'unambiguous'字段，让Babel自动判断每个文件的模块类型，不会强制统一解析规则：

  // babel.config.js 或 webpack配置中的babel参数
  module.exports = {
    presets: ['@babel/preset-env', '@babel/preset-react'],
    sourceType: 'unambiguous'
  }
  

• 第四步（保留根目录共享依赖适用）：添加npm配置
  在client目录下新建.npmrc文件，写入以下内容，强制npm安装时的依赖提升规则和根目录安装保持一致：

  legacy-peer-deps=true
  node-linker=hoisted
  

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