升级Node.js 22后React应用无法渲染问题求助

一、先解决「Invalid hook call」错误 #

这个错误90%是因为monorepo里存在多份React实例，结合你的npm link流程，本地packages/react包大概率用了自己node_modules里的React，和根项目的React冲突——即使设了peerDependencies，也可能因为link机制没生效。

解决步骤： #

1. 强制复用根项目的React实例
   在packages/react目录下执行：

   npm link ../node_modules/react
   npm link ../node_modules/react-dom
   

   让本地包直接使用根项目的React，避免两份实例冲突。

2. 调整Rollup配置，排除React依赖
   打开packages/react/rollup.config.js，把react和react-dom设为外部依赖，不让Rollup把它们打包进库文件：

   export default {
     // ...其他配置
     external: ['react', 'react-dom'],
     output: {
       // ...其他输出配置
       globals: {
         react: 'React',
         'react-dom': 'ReactDOM'
       }
     }
   }
   

3. 替换npm link为Workspace依赖（更可靠）
   如果你的npm版本是7+，推荐用npm workspace代替link，避免路径问题：

   • 在根目录package.json中添加：

     "workspaces": ["packages/*"]
     

   • 删除所有node_modules和lock文件，重新执行npm install，npm会自动关联本地packages/react包，无需手动link。

二、解决「process is not defined」错误 #

Node.js 16+之后，浏览器环境不再默认注入process变量，而你之前用Node 14时的构建流程可能自动处理了这个问题——特性分支大概率已经补了这个配置，develop分支没同步。

解决步骤： #

1. 用Rollup插件注入process变量
   安装@rollup/plugin-replace：

   npm install @rollup/plugin-replace --save-dev
   

   然后在Rollup配置中添加：

   import replace from '@rollup/plugin-replace';
   
   export default {
     plugins: [
       // ...其他插件
       replace({
         'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
         preventAssignment: true
       })
     ]
   }
   

   这个插件会把代码中的process.env.NODE_ENV替换为实际的环境变量值，同时避免浏览器报错。

三、分支差异排查（核心：为什么特性分支正常？） #

既然特性分支能跑，develop不行，直接对比两个分支的以下文件：

• 根目录和packages/react的package.json：检查React版本、peerDependencies配置、scripts中的构建命令
• rollup.config.js：对比插件配置（比如有没有replace插件、external配置是否一致）
• .nvmrc：是否develop分支还指定了Node 14？如果有，删除或改为22
• 根目录的package-lock.json：检查依赖树中React的版本和实例数量

最后验证流程 #

1. 切换到develop分支
2. 删除所有node_modules和package-lock.json（根目录+packages/react）
3. 根目录执行npm install（如果开了workspace，会自动处理本地包）
4. 执行npm run build-lib（packages/react目录）
5. 根目录执行npm run start

内容的提问来源于stack exchange，提问作者Zach W.