{"id":19047,"library":"babel-plugin-ember-template-compilation","title":"babel-plugin-ember-template-compilation","description":"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.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/emberjs/babel-plugin-ember-template-compilation","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-ember-template-compilation","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-ember-template-compilation","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-ember-template-compilation","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for the Babel plugin interface.","package":"@babel/core","optional":false},{"reason":"Used internally for parsing and transforming Handlebars templates.","package":"@glimmer/syntax","optional":false},{"reason":"Used internally for compiling templates to bytecode.","package":"@glimmer/compiler","optional":false}],"imports":[{"note":"v3+ is ESM-only, use import or require with babel config.","wrong":"import plugin from 'babel-plugin-ember-template-compilation';","symbol":"default (plugin)","correct":"module.exports = require('babel-plugin-ember-template-compilation');"},{"note":"outputFormat is the correct option key, not format.","wrong":"{\n  plugins: [\n    ['babel-plugin-ember-template-compilation', { format: 'wire' }]\n  ]\n}","symbol":"outputFormat","correct":"{\n  plugins: [\n    ['babel-plugin-ember-template-compilation', { outputFormat: 'wire' }]\n  ]\n}"},{"note":"targetFormat (introduced in v3 alpha) is distinct from outputFormat; see docs.","wrong":"{\n  plugins: [\n    ['babel-plugin-ember-template-compilation', { target: 'wire' }]\n  ]\n}","symbol":"targetFormat","correct":"{\n  plugins: [\n    ['babel-plugin-ember-template-compilation', { targetFormat: 'wire' }]\n  ]\n}"}],"quickstart":{"code":"// babel.config.js\nmodule.exports = function (api) {\n  api.cache(true);\n  return {\n    presets: [\n      ['@babel/preset-env', { targets: { node: 'current' } }]\n    ],\n    plugins: [\n      ['babel-plugin-ember-template-compilation', {\n        outputFormat: 'wire',\n        compilerPath: require.resolve('@glimmer/compiler')\n      }]\n    ]\n  };\n};\n\n// In your component:\nimport { hbs } from 'ember-template-imports';\nconst template = hbs`\n  <h1>Hello {{name}}</h1>\n`;\n\nexport default class MyComponent {\n  name = 'World';\n}","lang":"javascript","description":"Configures Babel to compile Ember template strings (via hbs) using the wire format and @glimmer/compiler."},"warnings":[{"fix":"Update to Node >=18, and ensure your Babel config or bundler handles ESM. If using require(), switch to import.","message":"v3.0.0 converted to ESM-only; dropping CommonJS and Node < 18 support.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"If you relied on the real path in moduleName, configure it explicitly using the 'moduleName' option in the plugin.","message":"v4.0.0 avoids leaking real filename paths in output due to moduleName.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Use option key 'outputFormat' (not 'format'). Valid values: 'wire', 'hbs', 'hbs-loose'.","message":"The 'outputFormat' option is required if not using auto-detection. Common mistake: using 'format' instead.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Prefer 'targetFormat' when using v3+. Check documentation for mapping.","message":"The 'targetFormat' option was introduced in v3 alpha and may replace 'outputFormat' in future.","severity":"deprecated","affected_versions":">=3.0.0-alpha"},{"fix":"Upgrade to >=2.4.1 to get correct this binding.","message":"v2.4.1 fixes incorrect 'this' binding when there's a TypeScript 'this' arg in scope.","severity":"breaking","affected_versions":"<2.4.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install --save-dev @glimmer/compiler","cause":"The plugin depends on @glimmer/compiler, which is not installed or not in node_modules.","error":"Error: Cannot find module '@glimmer/compiler'"},{"fix":"Use import plugin from 'babel-plugin-ember-template-compilation' or update Babel config to use import.","cause":"Using a CommonJS require in an ESM-only version (v3+).","error":"TypeError: babel-plugin-ember-template-compilation is not a function"},{"fix":"Add moduleName: false if you don't want filenames, or set it to a string.","cause":"Missing the moduleName option in plugin config when using certain outputFormat.","error":"The 'moduleName' option must be a string or false, got undefined."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}