Vite+React项目开发环境报错：React is not defined求助

问题现象 #

执行vite build和vite preview均正常，但运行vite（即npm run dev）时页面白屏，控制台抛出错误：
Uncaught ReferenceError: React is not defined at publicUtils.jsx:147:37

相关配置与代码 #

vite.config.js #

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
import mkcert from "vite-plugin-mkcert";

export default defineConfig({
  plugins: [
    react(),
    vanillaExtractPlugin(),
    mkcert({
      hosts: ["localhost"],
    }),
  ],
  optimizeDeps: {
    include: ["lodash", "react-is", "prop-types"],
  },
  resolve: {
    alias: {
      lodash: "lodash-es",
      "react-is": "react-is",
      "prop-types": "prop-types",
    },
  },
  esbuild: {
    jsxInject: import React from 'react', // 错误配置
  },
  server: { https: true, port: 4173, host: "localhost" },
});

package.json #

{
  "name": "my-vite-react-ts-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@sas/client": "file:./framework/sas-client-1.0.0.tgz",
    "@sas/components": "file:./framework/sas-components-1.0.0.tgz",
    "@sas/ui-client": "file:./framework/sas-ui-client-1.0.0.tgz",
    "clsx": "^1.1.1",
    "dns": "^0.2.2",
    "lodash": "^4.17.21",
    "lodash-es": "^4.17.21",
    "polished": "^4.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-focus-lock": "^2.5.2",
    "react-is": "^17.0.2"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.172",
    "@types/node": "^20.1.2",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.2",
    "@types/react-is": "^17.0.2",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vanilla-extract/css": "^1.10.0",
    "@vanilla-extract/css-utils": "^0.1.1",
    "@vanilla-extract/sprinkles": "^1.1.3",
    "@vanilla-extract/vite-plugin": "^3.8.0",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "4.8.4",
    "vite": "^4.3.2",
    "vite-plugin-commonjs-externals": "^0.1.1",
    "vite-plugin-mkcert": "^1.5.0"
  }
}

publicUtils.jsx（报错关键片段） #

export function useGetLatest(obj) {
  const ref = React.useRef() // 未手动导入React，依赖自动注入
  ref.current = obj

  return React.useCallback(() => ref.current, [])
}

问题原因 #

vite.config.js中esbuild.jsxInject配置错误：该选项要求传入字符串形式的代码，用于自动注入到每个JSX文件顶部，但当前写法是直接写了import React from 'react'表达式而非字符串，导致开发环境未成功自动注入React导入语句。生产构建因打包工具的额外处理（如tree-shaking或插件兼容）间接规避了该问题，所以构建后正常运行。

修复方案 #

修改vite.config.js中的esbuild配置，将jsxInject的值改为字符串：

esbuild: {
  jsxInject: "import React from 'react';",
},

修改后重启开发服务，React会自动注入到所有JSX文件顶部，publicUtils.jsx中的React.useRef等API即可正常识别，不会再抛出未定义错误。

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