vite-plugin-jsx-in-js

Treat .js files as JSX modules in Vite so React Refresh can process legacy React code without renaming every file to .jsx or .tsx.

⚠️ Vite team has disabled react refresh for JSX in .js files on purpose. [↗️ 1] [↗️ 2]

It is not recommended to use this plugin for new projects. This plugin is a workaround to restore that behavior for legacy React codebases without renaming every file to .jsx or .tsx.

Install

npm install -D vite-plugin-jsx-in-js

Vite 5, 6, 7, and 8 are supported. This plugin need to be use with @vitejs/plugin-react.

Usage

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import jsxInJs from "vite-plugin-jsx-in-js";

export default defineConfig({
  plugins: [
    jsxInJs({
      // include: /^(?!.*node_modules).*\.js$/,
    }),
    react({
      runtime: "classic",
    }),
  ],
});

Options

include

Type: RegExp
Default: /^(?!.*node_modules).*\.js$/, includes all .js files except those in node_modules.

How It Works

The plugin resolves matching .js modules to virtual .js.jsx ids, loads the original file contents, and mirrors hot updates onto the shimmed module. That lets Vite and React Refresh treat legacy .js React modules like JSX while keeping the files in place.

Limitations

Since this plugin works by virtualizing .js files as .js.jsx, you may see .js.jsx instead of .js in places like stack traces and dev tools.

License

MIT