Nx React+Vite Monorepo添加组件库后浏览器持续加载问题

当前现象 #

在基于React+Vite的Nx Monorepo中添加组件库后，浏览器始终处于加载状态，无法正常显示UI。

预期效果 #

应用能够正常加载并在浏览器中显示UI界面。

复现步骤 #

• 创建Nx Monorepo
• 添加React工作区
• 在package.json中添加React、TypeScript及Vite依赖
• 在apps/yourApp中引入UI组件
• 执行nx serve yourApp
• 编译成功后打开对应URL，浏览器持续处于加载状态

Nx环境信息 #

Node   : 21.5.0
OS     : linux-x64
pnpm   : 8.15.3

nx (global)        : 18.0.0
nx                 : 18.0.6
@nx/js             : 18.0.6
@nx/linter         : 18.0.6
@nx/eslint         : 18.0.6
@nx/workspace      : 18.0.6
@nx/devkit         : 18.0.6
@nx/eslint-plugin  : 18.0.6
@nx/react          : 18.0.6
@nrwl/tao          : 18.0.6
@nx/vite           : 18.0.6
@nx/web            : 18.0.6
typescript         : 5.3.3

错误日志 #

构建时错误 #

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
vite v5.1.4 building for production...

/src/styles.scss doesn't exist at build time, it will remain unchanged to be resolved at runtime
x Build failed in 9.31s
error during build:
Error: Unexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(vite:esbuild) transform "/home/oem/ppppppp/paletta monorepo/react-monorepo/Libs/Assets/src/lib/icons/StatistiqueIcon.tsx"
(vite:esbuild) transform "/home/oem/ppppppp/paletta monorepo/react-monorepo/Libs/Assets/src/lib/icons/ExpandRightIcon.tsx"
(vite:esbuild) transform "/home/oem/ppppppp/paletta monorepo/react-monorepo/Libs/Assets/src/lib/icons/HomeIcon.tsx"
(vite:esbuild) transform "/home/oem/ppppppp/paletta monorepo/react-monorepo/Libs/Assets/src/lib/icons/ParcCheckIcon.tsx"
    at process.handleBeforeExit (file:///home/oem/ppppppp/paletta%20monorepo/react-monorepo/node_modules/.pnpm/rollup@4.12.0/node_modules/rollup/dist/es/shared/node-entry.js:19915:28)
    at Object.onceWrapper (node:events:634:26)
    at process.emit (node:events:519:28)
Warning: command "vite build" exited with non-zero status code

启动服务时日志（看似正常） #

nx run admin:serve

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

  VITE v5.1.4  ready in 402 ms

  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

[TypeScript] Found 0 errors. Watching for file changes.
h

  Shortcuts
  press r + enter to restart the server
  press u + enter to show server url
  press o + enter to open in browser
  press c + enter to clear console
  press q + enter to quit

环境信息 #

• 包管理器：pnpm 8.15.3
• 操作系统：Linux

补充截图 #

解决步骤 #

1. 修复缺失的样式文件问题 #

检查项目中是否存在/src/styles.scss：

• 如果文件不存在，创建该文件或调整Vite配置中的样式入口路径，确保构建时能正确解析样式文件
• 若样式文件在其他位置，在vite.config.ts中通过resolve.alias配置路径别名，避免运行时解析错误

2. 解决esbuild转换卡住的问题 #

从错误日志看，esbuild处理图标组件时Promise未完成，导致构建提前退出，可尝试以下操作：

• 检查图标组件文件：排查StatistiqueIcon.tsx等图标文件是否存在语法错误、循环依赖或未导出的内容
• 清理缓存：执行nx reset清除Nx缓存，再重新执行nx serve yourApp或nx build yourApp
• 调整Vite esbuild配置：在vite.config.ts中添加esbuild的排除规则或调整转换选项，例如：

  export default defineConfig({
    esbuild: {
      exclude: ['**/Libs/Assets/src/lib/icons/*.tsx'] // 根据实际路径调整
    }
  })
  

• 更新依赖版本：尝试将Nx相关依赖统一升级到最新稳定版，或调整Vite版本至与Nx 18兼容的版本

3. 排查组件库引入问题 #

• 验证组件库链接：确保组件库在Monorepo的pnpm workspace中被正确配置，执行pnpm install确认依赖链接正常
• 逐步排查组件：暂时移除组件库的引入，确认应用能正常加载后，再逐个引入组件，定位是哪个组件导致加载卡住
• 检查组件导出：确认组件库中的组件导出格式正确，应用中的引入路径无误

4. 处理Vite CJS API警告 #

虽然该警告不直接导致加载问题，但可能引发潜在的Promise处理异常：

• 将Nx的Vite配置文件改为ESM格式（使用import而非require语法）
• 确保Nx的Vite插件正确使用ESM API，避免调用CJS版本的Vite Node API

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