\
**Category:** General\
**Created:** [November 1, 2019, 6:50am UTC](https://discuss.emberjs.com/t/emberjs-addon-could-not-find-htmlbars-inline-procompile/17177 "2019-11-01T06:50:13Z")\
**Posts on this page:** 6\
**Page:** 1
**Author:**  [@whynot](https://discuss.emberjs.com/u/whynot)\
**Post date:** [November 1, 2019, 6:50am UTC](https://discuss.emberjs.com/t/emberjs-addon-could-not-find-htmlbars-inline-procompile/17177/1 "2019-11-01T06:50:14Z")
Ember 3.6.2 Ember-Cli: 3.6.1 Node: 10.16.1 Os: darwin x64
First, I created a new ember addon `ember addon my-test`
Second, i create a component `ember g component dynamic-view —pod`
I remove the template.hbs file, and change component.js look like this.
```
import Component from '@ember/component';
// import layout from './template';
import hbs from 'htmlbars-inline-precompile';
export default Component.extend({
hello:"hello",
layout: hbs('{{hello}}')
});
```
Package.json \> {
> ```
> "name": "my-test",
> "version": "0.0.0",
> "description": "The default blueprint for ember-cli addons.",
> "keywords": [
> "ember-addon"
> ],
> "repository": "",
> "license": "MIT",
> "author": "",
> "directories": {
> "doc": "doc",
> "test": "tests"
> },
> "scripts": {
> "build": "ember build",
> "lint:hbs": "ember-template-lint .",
> "lint:js": "eslint .",
> "start": "ember serve",
> "test": "ember test",
> "test:all": "ember try:each"
> },
> "dependencies": {
> "ember-cli-babel": "^7.1.2",
> "ember-cli-htmlbars": "^3.0.0"
> },
> "devDependencies": {
> "@ember/optional-features": "^0.6.3",
> "broccoli-asset-rev": "^2.7.0",
> "ember-cli": "~3.6.1",
> "ember-cli-dependency-checker": "^3.0.0",
> "ember-cli-eslint": "^4.2.3",
> "ember-cli-htmlbars-inline-precompile": "^1.0.3",
> "ember-cli-inject-live-reload": "^1.8.2",
> "ember-cli-sri": "^2.1.1",
> "ember-cli-template-lint": "^1.0.0-beta.1",
> "ember-cli-uglify": "^2.1.0",
> "ember-disable-prototype-extensions": "^1.1.3",
> "ember-export-application-global": "^2.0.0",
> "ember-load-initializers": "^1.1.0",
> "ember-maybe-import-regenerator": "^0.1.6",
> "ember-qunit": "^3.4.1",
> "ember-resolver": "^5.0.1",
> "ember-source": "~3.6.0",
> "ember-source-channel-url": "^1.1.0",
> "ember-try": "^1.0.0",
> "eslint-plugin-ember": "^5.2.0",
> "eslint-plugin-node": "^7.0.1",
> "loader.js": "^4.7.0",
> "qunit-dom": "^0.8.0"
> },
> "engines": {
> "node": "6.* || 8.* || >= 10.*"
> },
> "ember-addon": {
> "configPath": "tests/dummy/config"
> }
>
> ```
>
> }
In Dummy application.hbs
```
{{dynamic-view}}
```
Show the error: ` Error: Could not find module htmlbars-inline-precompile imported from my-test/components/dynamic-view/component`
---
**Author:**  [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [November 1, 2019, 1:40pm UTC](https://discuss.emberjs.com/t/emberjs-addon-could-not-find-htmlbars-inline-procompile/17177/2 "2019-11-01T13:40:59Z")
Does the `hbs` macro work as a function? It’s normally used as a tagged template string:
```diff
-layout: hbs('{{hello}}')
+layout: hbs`{{hello}}`
```
---
**Author:**  [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\
**Post date:** [November 1, 2019, 2:11pm UTC](https://discuss.emberjs.com/t/emberjs-addon-could-not-find-htmlbars-inline-procompile/17177/3 "2019-11-01T14:11:09Z")
> [@ef4](#):
>
> Does the `hbs` macro work as a function? It’s normally used as a tagged template string:
Yep. It does indeed! For example, the `CallExpression` form is useful for providing additional metadata to the compilation. `ember-cli-htmlbars@4` uses this so that colocated templates have the correct `moduleName` when compiled (the `moduleName` is important for some systems e.g. translations). See an [example test](https://github.com/ember-cli/ember-cli-htmlbars/blob/d1b9683dc770042be91f4ac96f93d58dcaaed74f/node-tests/colocated-broccoli-plugin-test.js#L52).
* * *
However! That complete / random aside is unrelated to the actual question from the original poster (sorry!).
@whynot - The issue here is that if you use a dependency in “production” (e.g. your _consumers_ need it) then it must be in `dependencies` not `devDependencies`. In this case the component is within the `addon/` folder so the `ember-cli-htmlbars-inline-precompile` that you have setup in `devDependencies` does not run against it.
---
**Author:**  [@whynot](https://discuss.emberjs.com/u/whynot)\
**Post date:** [November 2, 2019, 3:07am UTC](https://discuss.emberjs.com/t/emberjs-addon-could-not-find-htmlbars-inline-procompile/17177/4 "2019-11-02T03:07:37Z")
thank you every much let me figure it out. 😀
---
**Author:**  [@whynot](https://discuss.emberjs.com/u/whynot)\
**Post date:** [November 2, 2019, 3:08am UTC](https://discuss.emberjs.com/t/emberjs-addon-could-not-find-htmlbars-inline-procompile/17177/5 "2019-11-02T03:08:47Z")
thanks a lot. I will use ` next time
---
**Author:**  [@whynot](https://discuss.emberjs.com/u/whynot)\
**Post date:** [November 3, 2019, 1:47pm UTC](https://discuss.emberjs.com/t/emberjs-addon-could-not-find-htmlbars-inline-procompile/17177/7 "2019-11-03T13:47:54Z")
After I change the package.json it works fine in my addon dummy. But still does not work in my primary project, when I install my addon to my primary project.
> “dependencies”: { “ember-cli-babel”: “^7.1.2”, “ember-cli-template-lint”: “^1.0.0-beta.1”, “ember-cli-htmlbars”: “^3.0.0”, “ember-cli-htmlbars-inline-precompile”: “^1.0.3”, “coonejs”: “git+ssh://MY PRIVATE SERVER/coone/coonejs.addon.js” //MY ADDON using inline compile }
still raise error of this error message in my primary ember project(not addon)
> Error: Could not find module `htmlbars-inline-precompile` imported from `coonejs/components/co-view/component`.
So I create a new pure add-on again, and use HBS precompile , and it works. But I still can not find which configure or dependency or something else.
#last update it suddenly works … and I do not known why it goes wrong…actually.
thank you all the same.