NX Vite-React npm库导入报错：React is not defined

问题分析 #

本地开发和构建预览正常，是因为Vite在应用模式下自动注入了React的相关引用，但库模式构建时未正确配置外部依赖与JSX转换逻辑，导致发布后的代码中JSX编译产物无法找到React全局变量。

解决步骤 #

1. 配置Vite库模式构建 #

修改Vite配置文件，启用库模式并标记React为外部依赖：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/index.ts', // 替换为你的库入口文件路径
      name: 'YourLibraryName',
      fileName: (format) => `your-library-name.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'], // 排除React，由使用方项目提供
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

2. 统一JSX编译配置 #

保持tsconfig.lib.json中的"jsx": "react-jsx"配置（React 17+的自动JSX转换无需手动导入React），根tsconfig.json的"jsx": "preserve"无需修改，NX库构建流程会自动使用tsconfig.lib.json的配置。

3. 完善package.json配置 #

更新库的package.json，声明对等依赖并配置导出规则：

{
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
  },
  "main": "./dist/your-library-name.umd.js",
  "module": "./dist/your-library-name.es.js",
  "types": "./dist/out-tsc/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/your-library-name.es.js",
      "require": "./dist/your-library-name.umd.js"
    }
  }
}

• peerDependencies确保使用方项目已安装React，避免重复打包
• 导出字段适配不同模块系统（ESM/CJS）的导入需求

4. 重新构建发布 #

执行NX构建命令重新编译库，再发布到npm即可。

验证 #

在测试项目中导入你的组件，无需手动添加import React from 'react'，组件可正常渲染，无React is not defined错误。

内容的提问来源于stack exchange，提问作者Bon Andre Opina