HMR does not work for *.js but works for *.jsx

[rawasaditya]

Documentation is

• Missing
• Outdated
• Confusing
• Not sure?

Explain in Detail

See vitejs/vite#14649

I am facing this issue too, there is no support for HMR if react component in written in js file instead of jsx. Not sure if this has to be part of documentation of vite because I think its specific to library like react

Your Suggestion for Changes

Just like here https://vite.dev/guide/troubleshooting.html#a-full-reload-happens-instead-of-hmr we have documentation for cyclic deps

Also there is a github issue linked for server.watch https://vite.dev/config/server-options.html#server-watch

Similarly there has to be documentation for this as well

Reproduction

https://github.com/rawasaditya/vite-hmr-reproduction/tree/main

Steps to reproduce

clone given project

npm i
npm run dev
change App.js to see browser reload

[hi-ogawa]

I'm not sure what's intended by the plugin, but adding import "react/jsx-dev-runtime" seems to enable fast refresh transform.

vite-plugin-react/packages/plugin-react/src/index.ts

Lines 186 to 193 in ab12dfa

	const useFastRefresh =
	!skipFastRefresh &&
	!ssr &&
	(isJSX ||
	(opts.jsxRuntime === 'classic'
	? importReactRE.test(code)
	: code.includes(jsxImportDevRuntime) ||
	code.includes(jsxImportRuntime)))

So, something like this actually gives HMR for .js as well.

import React from 'react';
import "react/jsx-dev-runtime"; /// 👈👈👈

function App() {
   ...

[ArnaudBarre]

This is an expected design of Vite from the beginning. The idea of Vite dev mode was to be serve files with with no overhead when possible, and forcing JSX inside .jsx means Vite can serve .js as is.
This is obviously debatable, but we are now in a TS era and TS force JSX to be in .tsx so for me it makes total sense to do the same thing in JS so it's easier to upgrade later on.

I think it was documented as some point but I can't find better in the current docs. We could document this better (cc @patak-dev @bluwy)

The fact that the plugin support HMR for JS code is react/jsx-dev-runtime is to support JS as a target language from other compile to JS languages when code is already compile to jsxDev() calls.

[bluwy]

I think it was documented as some point but I can't find better in the current docs. We could document this better

Do you mean https://vite.dev/guide/features.html#jsx? I think we can further explain there for sure 👍

[ArnaudBarre]

Yeah it just says JSX is supported in JSX/TSX, but we should be clear JSX is NOT supported in JS (because some people still expect it)