vite-plugin-react

Related plugins [x] plugin-react [ ] plugin-react-swc [ ] plugin-react-oxc [ ] plugin-rsc Describe the bug Description: Problem The @vitejs/plugin-react injects react-refresh code as a virtual module (/@react-refresh) into the HTML: import { injectIntoGlobalHook } from "/@react-refresh"; // ... The react-refresh package (since v0.17.0) uses modern JavaScript syntax like: Optional chaining (?.) Nullish coalescing operator (??) These ES2020 features are not supported in older browsers like Chrome 69 (released Aug 2018), causing syntax errors: Uncaught SyntaxError: Unexpected token '.' Current Behavior Configuring optimizeDeps.esbuildOptions.target: 'chrome69' does NOT help, because the injected @react-refresh virtual module bypasses the optimizeDeps pipeline. The virtual module is generated internally by the plugin. Expected Behavior The plugin should transpile the injected react-refresh code to match the configured browser target, or provide an option to do so. Possible Solutions 1. Add a target option to the plugin that transpiles the injected react-refresh code 2. Use esbuild to transform the injected code based on build.target or a dedicated option 3. Downgrade react-refresh internally for legacy browser support (less ideal) Workaround Currently, the only workaround is to pin react-refresh to v0.13.0 which doesn't use these modern syntax features. Environment Target browser: Chrome 69 Reproduction none Steps to reproduce _No response_ System Info Used Package Manager yarn Logs _No response_ Validations [x] Follow our Code of Conduct [x] Read the Contributing Guidelines. [x] Read the docs. [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate. [x] Make sure this is a Vite issue and not a framework-specific issue. [x] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server. [x] The provided reproduction is a minimal reproducible example of the bug.