项目构建版本出现TypeError: Object(...) is not a function错误，生产环境无异常如何解决？

这种情况通常是构建过程中React模块解析、版本兼容或者工具配置出了问题，以下是一步步的排查和解决方法：

1. 确认useState的导入方式正确 #

首先检查你的导入代码，确保useState是从react核心库导入的，而不是react-dom或其他第三方库：

// 正确的导入方式
import React, { useState } from 'react';

如果不小心从错误的路径导入，开发环境可能因为模块解析宽松没报错，但构建时的严格解析会触发这个错误。

2. 确保React和ReactDOM版本一致且兼容 #

开发环境和构建环境的React版本不一致是常见诱因，执行以下命令查看当前依赖的版本：

# npm用户
npm list react react-dom

# yarn用户
yarn list react react-dom

如果发现版本不一致，或者存在多个React实例（比如子依赖自带了不同版本的React），可以：

• 在package.json中锁定react和react-dom的版本号（去掉^或~前缀），然后重新安装依赖：

  npm install
  # 或
  yarn install
  

• 用依赖强制统一的方式，比如npm的overrides或yarn的resolutions：

  // npm项目，添加到package.json
  "overrides": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
  
  // yarn项目，添加到package.json
  "resolutions": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
  

之后重新安装依赖，确保所有模块使用同一个React版本。

3. 检查构建工具的配置问题 #

如果你用Webpack： #

• 确认@babel/preset-react已正确配置，且版本是最新的，它负责正确转译React的hooks语法。
• 检查externals配置，如果把React设为外部依赖，确保构建时能正确引入React全局变量，避免模块解析错误。
• 暂时关闭压缩插件（比如TerserPlugin），如果关闭后错误消失，说明是压缩过程中误处理了React的导出，可以更新压缩插件版本，或者调整配置保留React相关函数的名称：

  // webpack.config.js示例
  module.exports = {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            keep_fnames: /useState|useEffect/, // 保留hooks函数名
          },
        }),
      ],
    },
  };
  

如果你用Vite： #

• 检查vite.config.js中的resolve.alias配置，确保没有错误地将react指向了错误的路径。
• 暂时关闭构建优化中的tree shaking，在vite.config.js中设置：

  export default {
    build: {
      rollupOptions: {
        treeshake: false,
      },
    },
  };
  

如果关闭后错误消失，说明是tree shaking过度导致useState被误删，可以调整rollup的tree shake配置，或者更新Vite版本。

4. 排查第三方依赖冲突 #

某些旧的第三方库可能不兼容React Hooks，或者和你的React版本冲突。可以尝试：

• 暂时移除最近新增的依赖，重新构建项目，看错误是否消失。
• 查看第三方库的文档，确认它支持你当前使用的React版本。

5. 清理构建缓存 #

有时候构建缓存会导致旧的错误残留，清理缓存后重新构建：

# npm用户
npm run build -- --clean

# yarn用户
yarn build --clean

# Vite用户
rm -rf node_modules/.vite && yarn build

按照这些步骤逐一排查，应该能定位并解决问题。

内容的提问来源于stack exchange，提问作者Lhon Rafaat Mohammed