Registry / devops / babel-plugin-transform-react-templates

babel-plugin-transform-react-templates

library1.0.0jsnpmunverified

A Babel plugin (v1.0.0, no update cadence known) that transforms JSX files into self-registering templates by injecting a call to a global `register` function at the end of each module. It allows defining templates as standalone JSX files and importing them via a shared registry object. Differentiator: enables code-splitting of templates without explicit imports by using file-system conventions. Requires @babel/core >= 7.0.0. Deprecated in favor of modern patterns like dynamic imports and React.lazy.

devops

npm install babel-plugin-transform-react-templates

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-TRANS

babel-plugin-transform-react-templates

devopsjavascriptv1.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin

✓ module.exports = { plugins: [['transform-react-templates', options]] }

✗ module.exports = { plugins: ['transform-react-templates'] }

Must be placed in Babel config's plugins array. The plugin expects options object with includes, importRegisterFunctionFromModule, registerFunctionName, and registerTemplateName.

Configures Babel to auto-register JSX templates, defines a helper module with register function and templates object, creates a template file, and uses the registered template in a ReactDOM call.

// .babelrc { "plugins": [ [ "transform-react-templates", { "includes": ["**/templates/**/*.jsx"], "importRegisterFunctionFromModule": "./reactTemplateHelpers.js", "registerFunctionName": "register", "registerTemplateName": (moduleId) => require('path').parse(moduleId).name } ] ] } // src/reactTemplateHelpers.js export function register(template, component) { templates[template] = component; } export const templates = {}; // src/templates/test.jsx export default (data) => <div className="test">{data.testText}</div>; // src/main.js import { templates } from './reactTemplateHelpers'; ReactDOM.render(templates['test']({ testText: 'testing text' }), '#app');

Debug

Known issues

deprecatedPlugin is deprecated; use modern React patterns (e.g., dynamic imports, React.lazy) instead.

fix

Migrate to explicit imports or React.lazy for code-splitting.

affects: >=1.0.0

gotchaWithout importing the template files or injecting module IDs via Babel, templates will not be registered. The plugin only adds the register call; you still need to import the templates or configure Babel to include them.

fix

Ensure templates are imported or use Webpack's require.context or similar to include them.

affects: >=1.0.0

gotchaThe plugin modifies JSX files; if the module is not processed by Babel (e.g., excluded in .babelrc), the transform won't apply.

fix

Verify Babel includes the template files (e.g., via `includes` option).

affects: >=1.0.0

gotchaIf multiple plugins transform the same files, ordering matters. Use before other transforms that modify module exports.

fix

Place this plugin early in the plugins array.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'babel-plugin-transform-react-templates'

Plugin not installed or not listed in devDependencies.

fix

npm install --save-dev babel-plugin-transform-react-templates

Error: Plugin/preset files are not allowed to export objects, only functions.

Incorrect usage in Babel config: plugin entry is a string instead of an array with options.

fix

Use ['transform-react-templates', options] instead of 'transform-react-templates'.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

@babel/corerequiredPeer dependency required for plugin to work with Babel 7.

Agent activity

5 hits · last 30 days

node

Resources

githubhttps://github.com/cgkineo/babel-plugin-transform-react-templates ↗

packagebabel-plugin-transform-react-templates ↗

homepagehttps://github.com/cgkineo/babel-plugin-transform-react-templates#readme ↗