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() {
   ...