Next.js SSR迁移报错：'useLayoutEffect'等未从React导出

处理@floating-ui/react-dom无法导入'useLayoutEffect'的问题 #

• 统一React版本：@floating-ui/react-dom要求React 16.8+，Nx monorepo易出现多版本React冲突。在根目录package.json中添加版本锁定：

  // 根package.json，npm用overrides，Yarn用resolutions
  "overrides": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
  

  执行npm install或yarn install后，用nx dep-graph验证依赖树中React版本是否一致。
• 匹配Next.js与React版本：Next.js 13+需搭配React 18，若项目用旧版Next.js，要么升级Next.js，要么降级React到对应兼容版本（如Next.js 12对应React 17）。

解决无法从react/jsx-dev-runtime导入'jsxDEV'的问题 #

• 重置JSX配置：Next.js会自动处理JSX runtime，删除项目中babel.config.js或tsconfig.json里手动设置的jsx: "react-jsxdev"，确保tsconfig.json中jsx字段为preserve：

  // tsconfig.json
  "compilerOptions": {
    "jsx": "preserve"
  }
  

• 清理缓存：Nx和Next.js的缓存可能导致旧配置残留，执行以下命令：

  nx reset
  rm -rf .next node_modules/.cache
  nx run [你的应用名称]:dev
  

• 检查next.config.js：移除自定义babel配置，让Next.js默认处理，示例配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: true,
    // 注释或删除可能冲突的babel自定义配置
  };
  
  module.exports = nextConfig;
  

Nx Monorepo额外排查点 #

• 对齐@nx/next与Next.js版本：确保@nx/next包的版本和项目中next包版本一致，避免插件与框架不兼容。
• 根目录统一管理React依赖：子包不要单独安装react/react-dom，通过peerDependencies依赖根目录的版本，减少版本冲突概率。

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