babel-plugin-transform-jsx-to-htm

2.2.0 verified Sat Apr 25 auth: no javascript maintenance

A Babel plugin that compiles JSX into tagged template literals compatible with the htm library. Current stable version is 2.2.0. This plugin enables developers to use JSX syntax without a full Virtual DOM library or React, producing lightweight template literals instead of React.createElement calls. It supports custom tag functions, automatic imports of the htm tag, and namespaced JSX elements. Compared to similar tools like babel-plugin-jsx-to-html, this plugin specifically targets htm's syntax and ecosystem, offering tight integration with Preact and other htm-based libraries. Release cadence is irregular; last major feature release was v2.2.0 in 2020. Not actively maintained, but functional for existing projects.

Common errors

error Error: Cannot find module 'babel-plugin-transform-jsx-to-htm' ↓

cause Plugin not installed or not in node_modules.

fix

npm install --save-dev babel-plugin-transform-jsx-to-htm

error Error: .plugins[0][1] must be an object, string, or function ↓

cause Plugin options passed incorrectly (not wrapped in array).

fix

Use [['babel-plugin-transform-jsx-to-htm', { tag: 'html' }]] instead of ['babel-plugin-transform-jsx-to-htm', { tag: 'html' }].

error TypeError: html is not a function ↓

cause htm module not imported or tag function misspelled.

fix

Set import option correctly or ensure tag matches your import. Example: { import: { module: 'htm/preact', export: 'html' } }.

Warnings

deprecated Package is no longer actively maintained; last release 2.2.0 (2020). Works with older Babel versions but may break with future Babel updates. ↓

fix Consider migrating to babel-plugin-htm (if available) or using htm directly with JSX pragma.

gotcha Options must be wrapped in an array when passed to Babel plugin's configuration. ↓

fix Use [['babel-plugin-transform-jsx-to-htm', { ... }]] instead of ['babel-plugin-transform-jsx-to-htm', { ... }].

gotcha The import option generates an import statement; it does not bundle or resolve the htm module. Ensure htm is installed. ↓

fix Run 'npm install htm' if you use the import option.

gotcha Namespaced JSX (e.g., <ns:tag ns:attr='v'>) requires v2.2.0 or later. ↓

fix Update to v2.2.0+ or avoid namespaced JSX.

Install

npm install babel-plugin-transform-jsx-to-htm

yarn add babel-plugin-transform-jsx-to-htm

pnpm add babel-plugin-transform-jsx-to-htm

Imports

default (plugin)
wrong
```
import plugin from 'babel-plugin-transform-jsx-to-htm'
```
correct
```
module.exports = require('babel-plugin-transform-jsx-to-htm')
```
This is a Babel plugin, used in Babel config via CommonJS require or as a string in plugins array. ESM import may fail in Node.js environments.
plugin (string usage)
wrong
```
plugins: ['babel-plugin-transform-jsx-to-htm', { tag: 'html' }]
```
correct
```
plugins: ['babel-plugin-transform-jsx-to-htm']
```
Options must be passed as a nested array: [['babel-plugin-transform-jsx-to-htm', { options }]].
htm import (via plugin's import option)
wrong
```
import html from 'htm'
```
correct
```
plugins: [['babel-plugin-transform-jsx-to-htm', { import: { module: 'htm', export: 'html' } }]]
```
The plugin auto-generates the import statement; the developer does not manually import htm. The export key refers to a named export from the module.

Quickstart

Babel config to compile JSX into htm tagged templates with automatic import of the html tag from htm/preact.

// .babelrc or babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-transform-jsx-to-htm', {
      tag: 'html',
      import: {
        module: 'htm/preact',
        export: 'html'
      }
    }]
  ]
};

// Input (source.jsx):
const App = () => <div>Hello World</div>;

// Output (transpiled):
import { html as html } from 'htm/preact';
const App = () => html`<div>Hello World</div>`;