Babel Plugin Import JSX Pragma
Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.
JSX is merely a syntactic sugar for a function call, typically to
React.createElement when used with React. As such, it requires that the function referenced by this transform be within the scope of the file where the JSX occurs. In a typical React project, this means React must be imported in any file where JSX exists.
Babel Plugin Import JSX Pragma automates this process by introducing the necessary import automatically wherever JSX exists, allowing you to use JSX in your code without thinking to ensure the transformed function is within scope. It respects existing import statements, as well as scope variable declarations.
Install the module to your project using npm.
npm install @wordpress/babel-plugin-import-jsx-pragma
Refer to the Babel Plugins documentation if you don't yet have experience working with Babel plugins.
@wordpress/babel-plugin-import-jsx-pragma (and @babel/plugin-transform-react-jsx) as plugins in your Babel configuration. If you don't include both you will receive errors when encountering JSX tokens.
// .babelrc.jsmoduleexports =plugins:'@wordpress/babel-plugin-import-jsx-pragma''@babel/plugin-transform-react-jsx';
@wordpress/babel-plugin-import-jsx-pragma is included in
@wordpress/babel-preset-default (default preset for WordPress development) starting from
v4.0.0. If you are using this preset, you shouldn't include this plugin in your Babel config.
@babel/plugin-transform-react-jsx plugin offers options to customize the
pragma to which the transform references, there are equivalent options to assign for customizing the imports generated.
For example, if you are using the
@wordpress/element package, you may want to use the following configuration:
// .babelrc.jsmoduleexports =plugins:'@wordpress/babel-plugin-import-jsx-pragma'scopeVariable: 'createElement'scopeVariableFrag: 'Fragment'source: '@wordpress/element'isDefault: false'@babel/plugin-transform-react-jsx'pragma: 'createElement'pragmaFrag: 'Fragment';
Name of variable required to be in scope for use by the JSX pragma. For the default pragma of React.createElement, the React variable must be within scope.
Name of variable required to be in scope for
Fragment JSX. Named
<Fragment /> elements
expect Fragment to be in scope and will not add the import.
The module from which the scope variable is to be imported when missing.
Whether the scopeVariable is the default import of the source module. Note that this has no impact