Require and transpile JSX on the fly
npm install import-jsx> Import and transpile JSX via loader hooks. It doesn't transpile anything besides JSX and caches transpiled sources by default.
``console`
npm install import-jsx
> Note:
> import-jsx only works with ES modules.
`sh`
node --loader=import-jsx react-example.js
react-example.js
`jsx`
const HelloWorld = () => Hello world
;
React is auto-detected by default and react will be auto-imported, if it's not already.
`jsx`
const HelloWorld = () => Hello world
;
If an alternative library is used and exports createElement, like Preact, configure import-jsx to import it instead of React:
`jsx
/* @jsxImportSource preact /
const HelloWorld = () =>
$3
For libraries not compatible with React's API, but which still support JSX, import it and configure
import-jsx to use its pragma:`jsx
/* @jsxRuntime classic /
/* @jsx h /
import h from 'vhtml';const HelloWorld = () =>
Hello world
;
`$3
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:
`json
{
"name": "my-amazing-cli",
"bin": "cli.js"
}
`Insert this hashbang at the beginning of cli.js:
`jsx
#!/usr/bin/env NODE_NO_WARNINGS=1 node --loader=import-jsxconst HelloWorld = () =>
Hello world
;
`$3
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.`console
IMPORT_JSX_CACHE=0 node --loader=import-jsx my-code.js
``