Vite Plugin React JS Support

1.0.7 verified Mon Apr 27 auth: no javascript

Vite plugin that enables JSX syntax in .js files by injecting React import and applying Babel transformations, addressing Vite's default limitation to .jsx/.tsx files. Current version 1.0.7 is actively maintained for Vite 2+ and React 17+. Handles React 17+ automatic JSX runtime, supports custom Babel plugins, and mitigates Vite pre-bundling errors via optimizeDeps configuration. Key differentiator: replaces manual .js to .jsx renaming or custom Rollup plugins, with built-in condition-based React injection based on React version detection.

Common errors

error Cannot find module 'vite-plugin-react-js-support' ↓

cause Package not installed or ESM import used in CommonJS context.

fix

npm install --save-dev vite-plugin-react-js-support and ensure vite.config.js uses ES module syntax (type: 'module' in package.json or .mjs extension).

error Error: [vite:esbuild] Transform error with .js file: Unexpected token (1:10): ... Expected a semicolon ↓

cause Vite's esbuild fails on JSX syntax in .js file because JSX is not enabled for .js extension.

fix

Add the plugin to vite.config.js and restart dev server. If error persists, check that optimizeDeps.entries is set to false.

error ReferenceError: React is not defined ↓

cause jsxInject not adding React import, likely due to React version detection failing or jsxInject set to false.

fix

Ensure 'react' is installed and jsxInject: true. For React <17, set jsxInject: true anyway, or manually add import React from 'react' to files.

error vite-plugin-react-js-support: This plugin is no longer needed with Vite 4. Use esbuild JSX transform instead. ↓

cause User running a recent Vite version where native support exists.

fix

Remove the plugin and configure esbuild: { jsx: 'automatic' } in vite.config.js.

Warnings

gotcha If jsxInject is true (default) and the project uses React < 17, the automatic injection may incorrectly skip React import, causing runtime ReferenceError: React is not defined. ↓

fix Set jsxInject to false and manually ensure import React from 'react' in every file, or upgrade React to 17+.

breaking Vite 3/4 changes to optimizeDeps may conflict; setting optimizeDeps.entries to false is often required to avoid pre-bundling errors when using this plugin. ↓

fix Add optimizeDeps: { entries: false } to Vite config as shown in README.

gotcha The plugin only transforms .js files; .jsx files are left untouched, meaning Vite's default JSX handling applies. Mixing .js and .jsx can lead to inconsistent behavior if react plugin is not correctly configured. ↓

fix Use either .js or .jsx consistently, or ensure @vitejs/plugin-react is also added to handle .jsx files.

deprecated This plugin duplicates functionality of Vite's built-in esbuild JSX transform, which can handle .js files if configured. Consider migrating to Vite's native support. ↓

fix In vite.config.js, set esbuild: { jsx: 'automatic', jsxImportSource: 'react' } and remove this plugin.

gotcha Custom Babel plugins passed as first argument may run after JSX transformation, causing unexpected order-of-operations issues. ↓

fix Ensure custom plugins are designed to run after JSX transform, or use Vite's native Babel integration via @vitejs/plugin-react's babel property.

Install

npm install vite-plugin-react-js-support

yarn add vite-plugin-react-js-support

pnpm add vite-plugin-react-js-support

Imports

default export

wrong

const vitePlugin = require('vite-plugin-react-js-support')

correct

import vitePlugin from 'vite-plugin-react-js-support'

Package provides a default export; named exports are not available.

vitePlugin function call
wrong
```
vitePlugin()
```
correct
```
vitePlugin([], { jsxInject: true })
```
Accepts two arguments: array of custom Babel plugins (optional) and options object with jsxInject (default true). Omitting both is allowed but potentially unintended.
TypeScript usage
```
import vitePlugin from 'vite-plugin-react-js-support'
```
Package does not ship TypeScript definitions; use with @ts-ignore or create a declaration file: declare module 'vite-plugin-react-js-support'.

Quickstart

Configures Vite to support JSX in .js files, injects React import, and disables optimizeDeps to prevent pre-bundling errors.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import vitePlugin from 'vite-plugin-react-js-support';

export default defineConfig(({ command, mode }) => {
  const rollupOptions = {};
  if (command === 'serve') {
    rollupOptions.input = [];
  }
  return {
    plugins: [
      react(),
      vitePlugin([], { jsxInject: true })
    ],
    build: {
      rollupOptions
    },
    optimizeDeps: {
      entries: false,
    },
  };
});