HMR doesn't work with .js file

[mh-hridoy]

Describe the bug

I'm trying to upgrade my react app with vite and I did most of the necessary parts. Now I'm facing a problem related to HMR.
I have a lots of .js file and I don't want to rename all of them to .jsx (.jsx works just fine with HMR). Here's my vite config.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import fs from 'fs'

function readPackageJson() {
  try {
    const packageJsonContent = fs.readFileSync('./package.json', 'utf8');
    return JSON.parse(packageJsonContent);
  } catch (error) {
    console.error('Error reading package.json:', error);
    return null; 
  }
}

const packageJson = readPackageJson();

export default defineConfig({
  server: {
    host: "localhost",
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: packageJson.proxy,
        changeOrigin: true,
      }
    }
  },
  base: '/',
  plugins: [react({
    
    babel : {
      include: [/\.(j|t)sx?$/]
    }
  }) ],
  esbuild: {
    loader: "tsx",
    include: /src\/.*\.(j|t)sx?$/,
    exclude: []
  },
  optimizeDeps: {
    esbuildOptions: {
    loader : {
        ".js": "tsx",
    }
    },
  },

})

I've the loader as tsx because I have some type declaration in my .js file. With this setup, my app running in the development server perfectly but whenever I'm chaning my .js file, it shows page reload instead of HMR.
It's working with webpack5 and react-scripts5. Is there any way I can achieve hot refresh in my js file ?

Reproduction

no-link

Steps to reproduce

• create a vite app.
• Create .js file and write a react component.
• Try to update any content and you'll see the app page reloads.

System Info

- Macos
- Yarn
- vite latest

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. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• 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.

[chaejunlee]

Unfortunately, it is how vite is meant to work. HMR only works when jsx is in within the file named *.jsx.

You can see the related answers here #3112 (comment).

[mh-hridoy]

Thank you chaejunlee for the response. It'll be hard for me to rename all .jsx file and I'll have to make a lot of changes (removing ts type annotations from .js file as .jsx doesn't ignore them.) I'd better be using react-scripts5 for this project.

[chaejunlee]

It is kinda late but this would help. #3448 (comment)

[rawasaditya]

Don't you think vite should document this ? just like https://vite.dev/guide/troubleshooting.html#a-full-reload-happens-instead-of-hmr

for cyclic dependency