fix(plugin-react): jsxDev is not a function when is set NODE_ENV in e…

…nv files (#10861)

packages/plugin-react/src/index.ts

@@ -1,6 +1,7 @@
+import path from 'node:path'
 import type { ParserOptions, TransformOptions, types as t } from '@babel/core'
 import * as babel from '@babel/core'
-import { createFilter } from 'vite'
+import { createFilter, loadEnv, normalizePath, resolveEnvPrefix } from 'vite'
 import type { Plugin, PluginOption, ResolvedConfig } from 'vite'
 import MagicString from 'magic-string'
 import type { SourceMap } from 'magic-string'
@@ -118,8 +119,17 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
   const viteBabel: Plugin = {
     name: 'vite:react-babel',
     enforce: 'pre',
-    config(_, { mode }) {
-      // Copied from https://github.com/vitejs/vite/blob/4e9bdd4fb3654a9d43917e1cb682d3d2bad25115/packages/vite/src/node/config.ts#L488-L490
+    config(userConfig, { mode }) {
+      // Copied from https://github.com/vitejs/vite/blob/4e9bdd4fb3654a9d43917e1cb682d3d2bad25115/packages/vite/src/node/config.ts#L477-L494
+
+      const resolvedRoot = normalizePath(
+        userConfig.root ? path.resolve(userConfig.root) : process.cwd()
+      )
+      const envDir = userConfig.envDir
+        ? normalizePath(path.resolve(resolvedRoot, userConfig.envDir))
+        : resolvedRoot
+      loadEnv(mode, envDir, resolveEnvPrefix(userConfig))
+
       const isProduction =
         (process.env.NODE_ENV || process.env.VITE_USER_NODE_ENV || mode) ===
         'production'

playground/react-env/.env.staging

@@ -0,0 +1 @@
+NODE_ENV=production

playground/react-env/App.jsx

@@ -0,0 +1,14 @@
+import { useState } from 'react'
+
+function App() {
+  const [count, setCount] = useState(0)
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1 id="title">Hello Vite + React</h1>
+      </header>
+    </div>
+  )
+}
+
+export default App

playground/react-env/__tests__/react.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from 'vitest'
+import { page } from '~utils'
+
+test('should work', async () => {
+  expect(
+    await page.textContent('h1', {
+      timeout: 100
+    })
+  ).toMatch('Hello Vite + React')
+})

playground/react-env/index.html

@@ -0,0 +1,10 @@
+<div id="app"></div>
+<script type="module">
+  import React from 'react'
+  import ReactDOM from 'react-dom/client'
+  import App from './App.jsx'
+
+  ReactDOM.createRoot(document.getElementById('app')).render(
+    React.createElement(App)
+  )
+</script>

playground/react-env/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "test-react-env",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "workspace:*"
+  }
+}

playground/react-env/vite.config.ts

@@ -0,0 +1,16 @@
+import react from '@vitejs/plugin-react'
+import type { UserConfig } from 'vite'
+
+// Overriding the NODE_ENV set by vitest
+process.env.NODE_ENV = ''
+
+const config: UserConfig = {
+  plugins: [react()],
+  mode: 'staging',
+  build: {
+    // to make tests faster
+    minify: false
+  }
+}
+
+export default config