Registry / web-framework / vite-plugin-react-js-support

vite-plugin-react-js-support

library1.0.7jsnpmunverified

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.

web-framework serialization

npm install vite-plugin-react-js-support

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-REACT-

vite-plugin-react-js-support

web-frameworkjavascriptv1.0.7

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default export

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

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

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

vitePlugin function call

✓ vitePlugin([], { jsxInject: true })

✗ vitePlugin()

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'.

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, }, }; });

Debug

Known issues

gotchaIf 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+.

affects: >=1.0.0

breakingVite 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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

deprecatedThis 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.

affects: >=1.0.0

gotchaCustom 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

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: [vite:esbuild] Transform error with .js file: Unexpected token (1:10): ... Expected a semicolon

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.

ReferenceError: React is not defined

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.

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

User running a recent Vite version where native support exists.

fix

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

Upgrade

Version history

1.0.7latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

16 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/dravenww/vite-plugin-react-js-support ↗

packagehttps://www.npmjs.com/package/vite-plugin-react-js-support ↗