babel-plugin-ember-template-compilation

4.0.0 verified Sat Apr 25 auth: no javascript

Babel plugin implementing Ember's low-level template compilation API. Current stable version is 4.0.0 (released 2026-01-13). Maintained by the Ember core team. It handles compiling Ember handlebars templates into JavaScript functions during Babel transpilation. Key differentiator: it is the official, modern way to precompile Ember templates in build pipelines (Embroider, classic builds). Breaking changes: v3.0.0 converted to ESM-only and dropped Node <18; v4.0.0 avoids leaking real filename paths in output. Release cadence: major/minor every few months.

Common errors

error Error: Cannot find module '@glimmer/compiler' ↓

cause The plugin depends on @glimmer/compiler, which is not installed or not in node_modules.

fix

Run: npm install --save-dev @glimmer/compiler

error TypeError: babel-plugin-ember-template-compilation is not a function ↓

cause Using a CommonJS require in an ESM-only version (v3+).

fix

Use import plugin from 'babel-plugin-ember-template-compilation' or update Babel config to use import.

error The 'moduleName' option must be a string or false, got undefined. ↓

cause Missing the moduleName option in plugin config when using certain outputFormat.

fix

Add moduleName: false if you don't want filenames, or set it to a string.

Warnings

breaking v3.0.0 converted to ESM-only; dropping CommonJS and Node < 18 support. ↓

fix Update to Node >=18, and ensure your Babel config or bundler handles ESM. If using require(), switch to import.

breaking v4.0.0 avoids leaking real filename paths in output due to moduleName. ↓

fix If you relied on the real path in moduleName, configure it explicitly using the 'moduleName' option in the plugin.

gotcha The 'outputFormat' option is required if not using auto-detection. Common mistake: using 'format' instead. ↓

fix Use option key 'outputFormat' (not 'format'). Valid values: 'wire', 'hbs', 'hbs-loose'.

deprecated The 'targetFormat' option was introduced in v3 alpha and may replace 'outputFormat' in future. ↓

fix Prefer 'targetFormat' when using v3+. Check documentation for mapping.

breaking v2.4.1 fixes incorrect 'this' binding when there's a TypeScript 'this' arg in scope. ↓

fix Upgrade to >=2.4.1 to get correct this binding.

Install

npm install babel-plugin-ember-template-compilation

yarn add babel-plugin-ember-template-compilation

pnpm add babel-plugin-ember-template-compilation

Imports

default (plugin)

wrong

import plugin from 'babel-plugin-ember-template-compilation';

correct

module.exports = require('babel-plugin-ember-template-compilation');

v3+ is ESM-only, use import or require with babel config.

outputFormat

wrong

{
  plugins: [
    ['babel-plugin-ember-template-compilation', { format: 'wire' }]
  ]
}

correct

{
  plugins: [
    ['babel-plugin-ember-template-compilation', { outputFormat: 'wire' }]
  ]
}

outputFormat is the correct option key, not format.

targetFormat

wrong

{
  plugins: [
    ['babel-plugin-ember-template-compilation', { target: 'wire' }]
  ]
}

correct

{
  plugins: [
    ['babel-plugin-ember-template-compilation', { targetFormat: 'wire' }]
  ]
}

targetFormat (introduced in v3 alpha) is distinct from outputFormat; see docs.

Quickstart

Configures Babel to compile Ember template strings (via hbs) using the wire format and @glimmer/compiler.

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ['@babel/preset-env', { targets: { node: 'current' } }]
    ],
    plugins: [
      ['babel-plugin-ember-template-compilation', {
        outputFormat: 'wire',
        compilerPath: require.resolve('@glimmer/compiler')
      }]
    ]
  };
};

// In your component:
import { hbs } from 'ember-template-imports';
const template = hbs`
  <h1>Hello {{name}}</h1>
`;

export default class MyComponent {
  name = 'World';
}