{"id":19070,"library":"babel-plugin-htmlbars-inline-precompile","title":"babel-plugin-htmlbars-inline-precompile","description":"Babel plugin to replace tagged template strings or function calls with precompiled HTMLBars templates, primarily used in Ember.js applications. Current stable version is 5.3.1, released on a monthly cadence. Key differentiator: it allows inline HBS templates in tests and code, which get precompiled at build time. Alternative to ember-cli-htmlbars for non-Ember projects, but tightly coupled to Ember's template compiler. Requires Node 10+, Ember 2.10+, and Babel 7. Notable breaking change in v5.0.0: renamed `scope` option to `locals`.","status":"active","version":"5.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/ember-cli/babel-plugin-htmlbars-inline-precompile","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-htmlbars-inline-precompile","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-htmlbars-inline-precompile","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-htmlbars-inline-precompile","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default export from 'htmlbars-inline-precompile'. ESM-only; CommonJS require may not work in all packagers.","wrong":"const hbs = require('htmlbars-inline-precompile').default","symbol":"hbs","correct":"import hbs from 'htmlbars-inline-precompile'"},{"note":"Plugin requires options object with `precompile` function (or `templateCompilerPath` since v5). Without options, the plugin has no effect.","wrong":"plugins: ['babel-plugin-htmlbars-inline-precompile']","symbol":"babel-plugin-htmlbars-inline-precompile","correct":"plugins: [['babel-plugin-htmlbars-inline-precompile', { precompile: ... }]]"},{"note":"The precompile function comes from Ember's template compiler (e.g., @glimmer/compiler or ember-source), not from this plugin.","wrong":"import { precompile } from 'babel-plugin-htmlbars-inline-precompile';","symbol":"precompile","correct":"import { precompile } from '@glimmer/compiler';"}],"quickstart":{"code":"// Install: npm install --save-dev babel-plugin-htmlbars-inline-precompile htmlbars-inline-precompile\n// Configure Babel plugin in babel.config.js:\nmodule.exports = function(api) {\n  api.cache(true);\n  return {\n    plugins: [\n      ['babel-plugin-htmlbars-inline-precompile', {\n        precompile: require('@glimmer/compiler').precompile,\n        // or use templateCompilerPath option:\n        // templateCompilerPath: 'path/to/ember-template-compiler.js'\n      }]\n    ]\n  };\n};\n\n// In your test file:\nimport hbs from 'htmlbars-inline-precompile';\nimport { render } from '@ember/test-helpers';\n\nawait render(hbs`<p>Hello {{name}}!</p>`);","lang":"javascript","description":"Shows Babel plugin setup and usage of hbs tagged template for inline compiled templates."},"warnings":[{"fix":"Replace any usage of `scope` with `locals` in plugin options.","message":"In v5.0.0, the `scope` option was renamed to `locals`.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Upgrade to Babel 7 and use babel-plugin-htmlbars-inline-precompile >=3.0.0.","message":"The plugin relies on Babel 7; using Babel 6 will cause errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use ESM imports. If using CommonJS, write `const hbs = require('htmlbars-inline-precompile').default`.","message":"The import `import hbs from 'htmlbars-inline-precompile'` is a default export, but some bundlers may require `.default` when using CommonJS require.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `templateCompilerPath` option to specify path to template compiler.","message":"Passing `precompile` directly as an option is still supported but `templateCompilerPath` is preferred since v5.","severity":"deprecated","affected_versions":">=5.0.0"}],"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 babel-plugin-htmlbars-inline-precompile`.","cause":"Plugin not installed or not in node_modules.","error":"Cannot find module 'babel-plugin-htmlbars-inline-precompile'"},{"fix":"Ensure you pass a valid precompile function, e.g., from @glimmer/compiler: `precompile: require('@glimmer/compiler').precompile`.","cause":"The `precompile` option was not provided or points to an invalid object.","error":"TypeError: Cannot read property 'precompile' of undefined"},{"fix":"Ensure the Babel plugin is configured correctly and that code with hbs is being transpiled by Babel.","cause":"Using `hbs` as a regular function without the plugin configured or using it outside of Babel-transformed code.","error":"Error: hbs is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}