React集成Radix UI遇多类报错：无法导入Anchor等问题求助

错误1：Primitive.tsx抛出Uncaught TypeError: undefined is not a function #

• 问题根源：Radix UI各子模块版本不兼容，尤其是@radix-ui/react-primitive和其他Radix依赖版本不匹配
• 解决步骤：
  • 先卸载所有Radix相关包：npm uninstall @radix-ui/themes @radix-ui/react-primitive @radix-ui/react-tooltip
  • 重新安装统一版本的Radix包，直接装最新稳定版即可：npm install @radix-ui/themes @radix-ui/react-primitive @radix-ui/react-tooltip
  • 打开package.json检查所有@radix-ui/开头的依赖，确保版本号完全一致，避免混合不同版本的包

错误2：Uncaught ReferenceError: process is not defined #

• 问题根源：Vite等现代React脚手架不再默认注入Node.js的process全局变量，但部分Radix子模块依赖这个变量做环境判断
• 解决步骤：
  • 若用Vite：在vite.config.js中添加全局变量定义：

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    
    export default defineConfig({
      plugins: [react()],
      define: {
        'process.env': {}
      }
    })
    

  • 若用Create React App：要么升级到最新版CRA，要么在public/index.html的<head>标签里加这段脚本：

    <script>window.process = { env: {} };</script>
    

错误3：Can't import the named export 'Anchor' from non EcmaScript module #

• 问题根源：部分Radix模块未正确导出ES模块格式，或者脚手架的模块解析配置不兼容
• 解决步骤：
  • 确保项目根目录的package.json里有"type": "module"字段（现代ES模块项目必备）
  • 若用Vite，在vite.config.js的优化依赖配置里强制Radix包按ES模块处理：

    export default defineConfig({
      optimizeDeps: {
        include: ['@radix-ui/react-tooltip', '@radix-ui/react-primitive'],
        esbuildOptions: {
          format: 'esm'
        }
      }
    })
    

  • 若用CRA，需要通过react-app-rewired修改webpack配置，或者直接eject后调整模块解析规则，让webpack正确识别Radix的ES模块

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