{"id":27522,"library":"vite-plugin-react-js-support","title":"Vite Plugin React JS Support","description":"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.","status":"active","version":"1.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/dravenww/vite-plugin-react-js-support","tags":["javascript","vite-plugin","react-js","react","jsx"],"install":[{"cmd":"npm install vite-plugin-react-js-support","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-react-js-support","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-react-js-support","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package provides a default export; named exports are not available.","wrong":"const vitePlugin = require('vite-plugin-react-js-support')","symbol":"default export","correct":"import vitePlugin from 'vite-plugin-react-js-support'"},{"note":"Accepts two arguments: array of custom Babel plugins (optional) and options object with jsxInject (default true). Omitting both is allowed but potentially unintended.","wrong":"vitePlugin()","symbol":"vitePlugin function call","correct":"vitePlugin([], { jsxInject: true })"},{"note":"Package does not ship TypeScript definitions; use with @ts-ignore or create a declaration file: declare module 'vite-plugin-react-js-support'.","wrong":"","symbol":"TypeScript usage","correct":"import vitePlugin from 'vite-plugin-react-js-support'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport vitePlugin from 'vite-plugin-react-js-support';\n\nexport default defineConfig(({ command, mode }) => {\n  const rollupOptions = {};\n  if (command === 'serve') {\n    rollupOptions.input = [];\n  }\n  return {\n    plugins: [\n      react(),\n      vitePlugin([], { jsxInject: true })\n    ],\n    build: {\n      rollupOptions\n    },\n    optimizeDeps: {\n      entries: false,\n    },\n  };\n});","lang":"javascript","description":"Configures Vite to support JSX in .js files, injects React import, and disables optimizeDeps to prevent pre-bundling errors."},"warnings":[{"fix":"Set jsxInject to false and manually ensure import React from 'react' in every file, or upgrade React to 17+.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add optimizeDeps: { entries: false } to Vite config as shown in README.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use either .js or .jsx consistently, or ensure @vitejs/plugin-react is also added to handle .jsx files.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"In vite.config.js, set esbuild: { jsx: 'automatic', jsxImportSource: 'react' } and remove this plugin.","message":"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.","severity":"deprecated","affected_versions":">=1.0.0"},{"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.","message":"Custom Babel plugins passed as first argument may run after JSX transformation, causing unexpected order-of-operations issues.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"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).","cause":"Package not installed or ESM import used in CommonJS context.","error":"Cannot find module 'vite-plugin-react-js-support'"},{"fix":"Add the plugin to vite.config.js and restart dev server. If error persists, check that optimizeDeps.entries is set to false.","cause":"Vite's esbuild fails on JSX syntax in .js file because JSX is not enabled for .js extension.","error":"Error: [vite:esbuild] Transform error with .js file: Unexpected token (1:10): ... Expected a semicolon"},{"fix":"Ensure 'react' is installed and jsxInject: true. For React <17, set jsxInject: true anyway, or manually add import React from 'react' to files.","cause":"jsxInject not adding React import, likely due to React version detection failing or jsxInject set to false.","error":"ReferenceError: React is not defined"},{"fix":"Remove the plugin and configure esbuild: { jsx: 'automatic' } in vite.config.js.","cause":"User running a recent Vite version where native support exists.","error":"vite-plugin-react-js-support: This plugin is no longer needed with Vite 4. Use esbuild JSX transform instead."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}