EmberJS addon could not find htmlbars-inline-procompile

Questions General
1

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

2

Does the hbs macro work as a function? It’s normally used as a tagged template string:

-layout: hbs('{{hello}}')
+layout: hbs`{{hello}}`
1 Like
3

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.

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.

2 Likes
4

thank you every much let me figure it out. :grinning:

5

thanks a lot. I will use ` next time

7

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.