React automatic JSX fails with custom mode and externally set NODE_ENV

[swandir]

Describe the bug

One way to use --mode as mentioned in the docs is loading environment related options e.g. staging.

The docs then suggest to set NODE_ENV via .env.mode file. Though it seems completely valid to set NODE_ENV externally

NODE_ENV=production npx vite build --mode custom

However, this usage pattern breaks @vitejs/plugin-react's automatic JSX runtime.

The JSX transform doesn't seem to pick up NODE_ENV in this case, leading to importing JSX factory from jsx-dev-runtime, which is not defined in production React build.

Repro:

• visit https://stackblitz.com/edit/vitejs-vite-gfcjac
• wait for vite preview to start
• see the blank page and Uncaught TypeError: me.exports.jsxDEV is not a function in browser's console

Reproduction

https://stackblitz.com/edit/vitejs-vite-gfcjac

System Info

System:
    OS: macOS 12.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 5.05 GB / 32.00 GB
    Shell: 3.4.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.1.0 - ~/Library/Caches/fnm_multishells/63997_1650492419864/bin/node
    Yarn: 1.22.15 - ~/Library/Caches/fnm_multishells/63997_1650492419864/bin/yarn
    npm: 8.8.0 - ~/Library/Caches/fnm_multishells/63997_1650492419864/bin/npm
  Browsers:
    Brave Browser: 101.1.38.115
    Safari: 15.3
  npmPackages:
    @vitejs/plugin-react: ^1.3.2 => 1.3.2 
    vite: ^2.9.8 => 2.9.9

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[swandir]

Workaround is setting VITE_USER_NODE_ENV instead of NODE_ENV.

isProduction is using VITE_USER_NODE_ENV and the comment specifically mentions only setting NODE_ENV via .env.<mode> file.

vite/packages/vite/src/node/config.ts

Lines 395 to 402 in 102b678

	// Note it is possible for user to have a custom mode, e.g. `staging` where
	// production-like behavior is expected. This is indicated by NODE_ENV=production
	// loaded from `.staging.env` and set by us as VITE_USER_NODE_ENV
	const isProduction = (process.env.VITE_USER_NODE_ENV || mode) === 'production'
	if (isProduction) {
	// in case default mode was not production and is overwritten
	process.env.NODE_ENV = 'production'
	}

[Dunqing]

Nothing to do with react.

Vite only handles the NODE_ENV of the env file, but you set NODE_ENV in scripts, you can create .env.custom file and set NODE_ENV=production to fix it.

Let me support it.

[seivan]

Temporary hack in case anyone else stumbles on this.

class HackPlugin implements Vite.Plugin {
  readonly name = "HackPluginForNODE_ENV"
  enforce = 'pre' as const
  apply = (config: Vite.UserConfig, env: Vite.ConfigEnv) => {
    if (env.command === "build") {
      process.env["VITE_USER_NODE_ENV"] = process.env.NODE_ENV ?? "production"
    }
    return true
  }
}