Skip to content

[bundledDev] React Fast Refresh endpoint returns index.html instead of JavaScript #1482

Description

@dmchoi77

Describe the bug

When using Vite 8's experimental bundledDev mode together with @vitejs/plugin-react, the /@react-refresh endpoint returns the bundled application index.html instead of the React Fast Refresh runtime JavaScript.

This is reproducible in a minimal Vite + React project without Module Federation.

The response is successful from an HTTP perspective (200 OK), but the content type and response body are incorrect for a JavaScript runtime endpoint. This causes integrations that import the React Refresh runtime to
receive HTML instead of JavaScript.

In our Module Federation setup, a React Remote's refresh proxy imports the Host's /@react-refresh URL. When the Host uses bundledDev, that import receives index.html and fails with:

TypeError: Failed to fetch dynamically imported module:
http://127.0.0.1:5173/@react-refresh

The Module Federation integration is not required to reproduce the Vite endpoint behavior; it only exposes the incompatibility in an integration scenario.

Reproduction

https://github.com/dmchoi77/vite-bundleddev-react-refresh-repro

Steps to reproduce

  1. Clone the reproduction repository:

    git clone https://github.com/dmchoi77/vite-bundleddev-react-refresh-repro.git
    cd vite-bundleddev-react-refresh-repro
  2. Install the dependencies:

    npm install
  3. Start the Vite development server:

    npm run dev
  4. In another terminal, request the React Fast Refresh endpoint:

    curl -i http://127.0.0.1:5173/@react-refresh
  5. Compare the response with bundledDev disabled:

    • Change bundledDev: true to bundledDev: false in vite.config.js.
    • Restart the development server.
    • Run the same curl command again.

Actual result

With experimental.bundledDev: true, the endpoint returns the application
HTML document:

HTTP/1.1 200 OK
Content-Type: text/html

The response body contains index.html, including the bundled entry script:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite bundledDev React refresh repro</title>
    <script type="module" crossorigin src="/assets/index.js"></script>
  </head>

It does not contain the React Fast Refresh runtime JavaScript.

Expected result

The /@react-refresh endpoint should return the React Fast Refresh runtime as
JavaScript when @vitejs/plugin-react is enabled.

If React Fast Refresh is intentionally unsupported in bundledDev mode, the
endpoint should instead expose an explicit documented behavior or error so
that integrations can detect the limitation without receiving a successful
HTML fallback response.

For comparison, the same reproduction with experimental.bundledDev: false
returns the expected JavaScript response:

HTTP/1.1 200 OK
Content-Type: text/javascript

System Info

npmPackages:
    @vitejs/plugin-react: 6.0.2 => 6.0.2
    vite: 8.2.0 => 8.2.0

Used Package Manager

npm

Logs

The endpoint response with bundledDev: true:

HTTP/1.1 200 OK
Vary: Origin
Content-Type: text/html
Cache-Control: no-cache

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite bundledDev React refresh repro</title>
    <script type="module" crossorigin src="/web-api/iframe-proxy?url=https://github.com/assets/index.js"></script>

The related Module Federation integration error is:

TypeError: Failed to fetch dynamically imported module:
http://127.0.0.1:5173/@react-refresh

Validations

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions