rollup-plugin-jsx

1.0.3 verified Mon Apr 27 auth: no javascript maintenance

A Rollup plugin that transforms JSX syntax into JavaScript using jsx-transform. Version 1.0.3 is the latest stable release, with no recent updates. It allows configuring JSX factory functions and pragma options. Compared to alternatives like @rollup/plugin-babel with React preset or @rollup/plugin-sucrase, it is a lightweight, zero-config option for simple JSX transformation without full Babel setup. However, it is a thin wrapper around an unmaintained library (jsx-transform) and may not support modern JSX features like automatic runtime; it is best suited for legacy projects.

Common errors

error Error: Could not resolve 'jsx-transform' ↓

cause Missing peer dependency jsx-transform

fix

Run npm install jsx-transform

error TypeError: jsx is not a function ↓

cause Incorrect import: using named import instead of default

fix

Use import jsx from 'rollup-plugin-jsx' (default import) instead of import { jsx } from 'rollup-plugin-jsx'

error Module not found: Can't resolve 'react' in '...' ↓

cause JSX output expects React to be globally available but it's not bundled

fix

Include React as a dependency, use an external globals, or use @rollup/plugin-node-resolve

Warnings

gotcha The underlying jsx-transform library is unmaintained; may not support modern JSX features like automatic runtime (React 17+). ↓

fix Consider using @rollup/plugin-babel with @babel/preset-react or @rollup/plugin-sucrase for full JSX support.

deprecated The 'pragma' option is deprecated in favor of 'factory' in some future versions. Check compatibility. ↓

fix Use 'factory' option instead of 'pragma'.

gotcha Source maps may not work correctly if the plugin is not placed correctly in the plugin array (should be before any minification). ↓

fix Ensure the plugin is listed before other transforms in the Rollup config.

Install

npm install rollup-plugin-jsx

yarn add rollup-plugin-jsx

pnpm add rollup-plugin-jsx

Imports

jsx
wrong
```
const jsx = require('rollup-plugin-jsx')
```
correct
```
import jsx from 'rollup-plugin-jsx'
```
ES module import; CommonJS require also works as the package has a default export.
jsx
wrong
```
const jsx = require('rollup-plugin-jsx')
```
correct
```
const jsx = require('rollup-plugin-jsx').default
```
In CommonJS, the default export is accessed via .default. The module is not ESM-only.

jsx

wrong

import { jsx } from 'rollup-plugin-jsx'

correct

import jsx from 'rollup-plugin-jsx'; // default export

There is no named export; use default import.

Quickstart

Shows how to configure rollup-plugin-jsx with a custom factory and pragma for JSX transformation in a Rollup build.

import jsx from 'rollup-plugin-jsx';

export default {
  input: 'src/index.js',
  output: {
    file: 'bundle.js',
    format: 'iife',
  },
  plugins: [
    jsx({
      factory: 'React.createElement',
      pragma: 'h',
    }),
  ],
};