import-jsx

Import and transpile JSX via loader hooks. It doesn't transpile anything besides JSX and caches transpiled sources by default.

Install

npm install import-jsx

Usage

Note: import-jsx only works with ES modules.

node --loader=import-jsx react-example.js

react-example.js

const HelloWorld = () => <h1>Hello world</h1>;

Examples

React

React is auto-detected by default and react will be auto-imported, if it's not already.

const HelloWorld = () => <h1>Hello world</h1>;

Preact

If an alternative library is used and exports createElement, like Preact, configure import-jsx to import it instead of React:

/** @jsxImportSource preact */

const HelloWorld = () => <h1>Hello world</h1>;

Any JSX pragma

For libraries not compatible with React's API, but which still support JSX, import it and configure import-jsx to use its pragma:

/** @jsxRuntime classic */
/** @jsx h */
import h from 'vhtml';

const HelloWorld = () => <h1>Hello world</h1>;

Disable cache

import-jsx caches transpiled sources by default, so that the same file is transpiled only once. If that's not a desired behavior, turn off caching by setting IMPORT_JSX_CACHE=0 or IMPORT_JSX_CACHE=false environment variable.

IMPORT_JSX_CACHE=0 node --loader=import-jsx my-code.js