Support legacy browser targets (e.g., Chrome 69) for injected react-refresh code

[CodeSixz]

Related plugins

• 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:

<script type="module"> import { injectIntoGlobalHook } from "/@react-refresh"; // ... </script>

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

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Core(TM) i7-10700F CPU @ 2.90GHz
    Memory: 16.67 GB / 31.79 GB
  Binaries:
    Node: 18.20.5 - C:\Users\lds\.nvm\versions\node\v18.20.5\bin\node.EXE
    Yarn: 1.22.22 - C:\Users\lds\.nvm\versions\node\v18.20.5\bin\yarn.CMD
    npm: 10.8.2 - C:\Users\lds\.nvm\versions\node\v18.20.5\bin\npm.CMD
  Browsers:
    Chrome: 145.0.7632.116
    Edge: Spartan (44.19041.1266.0), Chromium (140.0.3485.66)
    Firefox: 147.0 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.19041.1566

Used Package Manager

yarn

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.
• 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.

[ArnaudBarre]

Can you gave more context on the reason you are running such an outdated browser in development?

Did you try making a small plugin that transform this module and apply esbuild/rolldown es5 compilation onto it?

[sapphi-red]

Even if plugin-react added support for them, it won't work because Vite only supports modern browsers.
https://vite.dev/guide/#browser-support

[CodeSixz]

@ArnaudBarre Thank you for your suggestion. I've created a Babel.js transformation plugin using AI, and it works correctly. As for why the development mode is on outdated browsers, it's because the business requirements are for non-browser projects, requiring a customized Chromium implementation.

[ArnaudBarre]

Cool to know you get it to work! For know this will be considered out of scope for Vite I think (@sapphi-red I let you close with not plan if you agree)