babel-plugin-mjsx

4.1.1 verified Sat Apr 25 auth: no javascript

Babel plugin for Mithril JSX precompilation, converting JSX into Mithril virtual DOM nodes (e.g., {tag: 'div', attrs: {}, children: []}). Current stable version is 4.1.1. The plugin has evolved through major versions, with v4.0.0 changing whitespace trimming behavior and v4.1.0 adding jsxCompliant (attribute casing) and warnDeprecatedHtml options. It is the primary JSX compiler for Mithril v2+ and precompilation yields performance benefits over runtime interpretation.

Common errors

error Error: Cannot find module 'babel-plugin-mjsx' ↓

cause Plugin name incorrectly prefixed with 'babel-plugin-' in config, but npm installed correctly.

fix

Use 'mjsx' in Babel config, not 'babel-plugin-mjsx'.

error Unsupported option: deprecated ↓

cause Using 'deprecated' option name after v4.1.0.

fix

Replace 'deprecated' with 'warnDeprecatedHtml'.

error TypeError: Cannot read properties of null (reading 'tag') ↓

cause JSX returning null or undefined, e.g., conditional rendering without fallback.

fix

Ensure JSX always returns a valid element or wrap conditionals with m() or fragment.

Warnings

breaking v4.0.0 changed whitespace trimming behavior to match v1.x; existing code may render differently if relying on whitespace. ↓

fix Update to v4.0.0+ and adjust templates if whitespace matters.

deprecated v4.1.0 changed option name from 'deprecated' to 'warnDeprecatedHtml'. Using deprecated option name will be ignored. ↓

fix Use 'warnDeprecatedHtml' instead of 'deprecated'.

gotcha Plugin name in Babel config must be 'mjsx', not 'babel-plugin-mjsx' or Babel will fail to find it. ↓

fix Use 'mjsx' as plugin name in .babelrc or programmatic config.

gotcha The plugin outputs Mithril v1-style m.component() for custom components; Mithril v2 uses m() directly. This may cause confusion. ↓

fix Ensure your Mithril version is compatible or manually adjust output.

Install

npm install babel-plugin-mjsx

yarn add babel-plugin-mjsx

pnpm add babel-plugin-mjsx

Imports

plugin
wrong
```
plugins: ['babel-plugin-mjsx']
```
correct
```
plugins: ['mjsx']
```
Babel plugin names are automatic without 'babel-plugin-' prefix

jsxCompliant

wrong

plugins: [['mjsx', { jsxCompliant: 'true' }]]

correct

plugins: [['mjsx', { jsxCompliant: true }]]

Option must be boolean, not string

warnDeprecatedHtml

wrong

plugins: [['mjsx', { deprecated: true }]]

correct

plugins: [['mjsx', { warnDeprecatedHtml: true }]]

Explicit option name is 'warnDeprecatedHtml'

Quickstart

Demonstrates Babel configuration and JSX-to-Mithril precompilation output.

// .babelrc
{
  "plugins": [
    ["mjsx", { jsxCompliant: true, warnDeprecatedHtml: false }]
  ]
}

// Input:
const view = () => (
  <div className="container">
    <Component foo="bar">Text</Component>
  </div>
);

// Output (simplified):
const view = () => ({
  tag: 'div',
  attrs: { className: 'container' },
  children: [
    m.component(Component, { foo: 'bar' }, ['Text'])
  ]
});