import-jsx

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>;

CLI

import-jsx can be used to transpile JSX inside CLI entrypoints defined in bin section of package.json and their imported files.

For example, given this package.json:

{
	"name": "my-amazing-cli",
	"bin": "cli.js"
}

Insert this hashbang at the beginning of cli.js:

#!/usr/bin/env NODE_NO_WARNINGS=1 node --loader=import-jsx

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