HMR does not work for JS files

[jprosevear]

Describe the bug

Using the jsx loader for js as files as per:
vitejs/vite#3448 (comment)

HMR does not work. Full page reloads happen instead.

Originally thought this might be solved by #188 (comment) but discussion there showed it was not.

This might be marked won't fix because Vite recommends the jsx/tsx extensions. However I thought it was worth a specific bug ticket even if its closed so there is a record of the decision.

Please note that create-react-app (where I'm porting from), nextjs and gatsby all support .js and this would help minimize the changes to port apps.

Reproduction

https://stackblitz.com/edit/vitejs-vite-p5o1nn?file=src%2FApp.js

Steps to reproduce

(Changing something in App.js)

System Info

See stack blitz

Used Package Manager

npm

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]

This has been fixed in #188 I think.
Anyway this will not be better supported in Vite. esbuild, swc and bun agreed to not enable the JSX parser on JS files. Plus most codebases are now in TS and the extension is mandatory. Migrating now will simplify a lot the setup of future tools. There are plenty of one line command available on the gitst/stack overflow to migrate.

[jprosevear]

This has been fixed in #188 I think. Anyway this will not be better supported in Vite. esbuild, swc and bun agreed to not enable the JSX parser on JS files. Plus most codebases are now in TS and the extension is mandatory. Migrating now will simplify a lot the setup of future tools. There are plenty of one line command available on the gitst/stack overflow to migrate.

It does not seem to have been fixed as per:
#188 (comment)
#188 (comment)

[jprosevear]

@ArnaudBarre @csr632 vitejs/vite#3448 (comment) plus the unreleased version of this plugin solves the issue.

The fix in #188 is required so that the "react/jsx-dev-runtime" is used to set useFastRefresh correctly

 (isJSX ||
          (opts.jsxRuntime === 'classic'
            ? importReactRE.test(code)
            : code.includes(devRuntime)))

(code.includes in the correct order in the ternerary)