In our application we use the template compiler at runtime by calling Ember.HTMLBars.compile with a handlebars template. Example code:
let myTemplate = `{{foo}}`;
application.register(`template:my-template`, Ember.HTMLBars.compile(myTemplate));
I've tried to upgrade from Ember 2.6 to Ember 2.7 but I get the following error in the developer console if I try to compile the template:
_ember.default.HTMLBars.compile is not a function()
In the documentation I couldn't find anything about the compile method being removed from the HTMLBars compiler.
How can I still use/enable the HTMLBars compiler at runtime in my application?
import original ember-template-compiler.js in ember-cli-build.js
app.import('bower_components/ember/ember-template-compiler.js');
I was needed to compile template during runtime
und used https://www.npmjs.com/package/ember-cli-handlebars-inline-precompile.
Try this:
import hbs from 'htmlbars-inline-precompile';
application.register(`template:my-template`, hbs`{{foo}}`);
Since there is less information provided, first try and check the error source.
presumably a library it is, you need to open your developers console [lets say chrome] and then click on the error which will direct you to where the error originates from so you can adjust or rectify the code...
Related
Facing the same issue - https://github.com/miragejs/ember-cli-mirage/issues/1445
Uncaught Error: Could not find module project-name/tests/helpers/push-mirage-into-store imported from project-name/mirage/factories/addon
Initially got this error and tried #makepanic instructions
After that
Uncaught Error: Could not find module #ember/test-helpers imported from project-name/mirage/helpers/push-mirage-into-store
can you pls help here to resolve this.
I bet you are running into the error, which is described in this comment by makepanic in the GitHub issue you linked:
When running the app directly, the browser opens index.html which
isn't loading tests.js. This file contains everything related to
tests.
If you open tests/index.html, that will also load tests.js and add any
modules under tests/* to the loader registry.
This means without the tests file loaded, you can't import anything
from tests/*.
You are affected by that issue if you face it when running ember serve.
The comment also includes a possible solution:
With you moving the helpers to /mirage, they gets registered in both index.html and tests/index.html.
An alternative would be to disable mirage in all enrironments except for test. But that is only a feasible solution if you use mirage only for testing but not for development.
I am having an issue with the HandlebarsHelper compiled templates on an MVC5 site. Here is the code for the BundleConfig:
bundles.Add(new Bundle("~/bundles/templates", new HandlebarsTransformer())
.IncludeDirectory("~/App/templates", "*.hbs", true));
This was working fine locally and then I pushed to a server hosting the QA environment and I was getting an assembly reference error saying the HandlebarsHelper plugin was calling Jurassic 2.1.0.0 and it wasn't found. So I added Jurassic through Nuget, since then the templates stopped working. I get this error from the browser:
Chrome:
Uncaught TypeError: undefined is not a function
Firefox:
TypeError: templateSpec.call is not a function
This is happening in the following section of handlebars.js:
return function(context, options) {
options = options || {};
var namespace = options.partial ? options : env,
helpers,
partials;
if (!options.partial) {
helpers = options.helpers;
partials = options.partials;
}
var result = templateSpec.call(
container,
namespace, context,
helpers,
partials,
options.data);
if (!options.partial) {
env.VM.checkRevision(container.compilerInfo);
}
return result;
};
I am running:
Ember 1.7.0
Ember-Data 1.0.0-beta.11
Handlebars 1.3.0
JQuery 2.1.1
MVC 5
.Net 4.5.2
I have been searching online all morning and not found any answers yet that have worked, I tried removing the Jurassic Nuget package and it did not help. Any ideas would be appreciated, let me know if there is any other info that would help diagnosing the issue.
You're on a version of HandlbarsHelper that's not supported for that version of Ember.js.
There was a breaking change for version 1.9 which added support for handlebars version 2.0. This is supported in HandlebarsHelper v2.0+. As a breaking change it means 2.0+ can't be used with Ember.JS < v1.9 and Handlebars < v2.0.
The reason why it was probably working initially was because in debug templates are usually just injected into the page unminified.
Easy fix is to use HandlebarsHelper v1.1 (https://www.nuget.org/packages/HandlebarsHelper/1.1.0)
The problem was I was using a version of Handlebars Helper that only supported handlebars 2.x. Found the issue in Nuget and changed it to a different version, everything works now. Thanks for the comments.
After installing ember-components via bower, I'm trying to use it;
depending on the component I get different errors;
for example if I try to use the tab component (simple version), I get this:
Assertion Failed: `blockHelperMissing` was invoked without a helper name, which is most likely due to a mismatch between the version of Ember.js you're running now and the one used to precompile your templates. Please make sure the version of `ember-handlebars-compiler` you're using is up to date.
Error: Assertion Failed: `blockHelperMissing` was invoked without a helper name, which is most likely due to a mismatch between the version of Ember.js you're running now and the one used to precompile your templates. Please make sure the version of `ember-handlebars-compiler` you're using is up to date.
With other components (such as accordion) I get errors like this:
Uncaught Error: <App.ItaHomeView:ember360> Handlebars error: Could not find property 'em-accordion' on object <App.HomeController:ember408>.
I'm using Ember 1.7.0, with handlebars 1.3.0 and ember-components 0.2.0
Can anyone please explain what I am doing wrong?
Since ember-cli 0.0.34 jquery is removed from the .jshint file as predefined.
So jquery needs to be imported, but I get the following error when doing it:
import $ from 'jquery';
The error I get is:
ENOENT, no such file or directory 'S:\...\tmp\tree_merger-tmp_dest_dir-Nb27WzDk.tmp\jquery.js'
Error: ENOENT, no such file or directory 'S:\...\tmp\tree_merger-tmp_dest_dir-Nb27WzDk.tmp\jquery.js'
at Object.fs.statSync (fs.js:684:18)
at addModule (S:\...\node_modules\ember-cli\node_modules\broccoli-es6-concatenator\index.js:81:46)
.....
I solved the problem by not importing jquery at all. jQuery is available via Ember.$ (link)
So I changed my code to use Ember.$(...) instead of $(...)
I've ran into the same problem after I updated ember-cli to 0.0.34. Although I was still able to use $ (jQuery) in my code, JSHint kept throwing the error:
project/views/blah.js: line 6, col 9, '$' is not defined.
You can edit your .jshintrc and add $ back to predef.
{
"predef": {
// ...
"$": true,
// ...
},
// ...
}
Would definitely prefer a method using import too.
Not sure if this will be of any help, but I was able to locate the file during build by using the line below, but it caused some issues in the browser:
import $ from 'vendor/jquery/dist/jquery';
$ becomes available after rendering / instantiation, as per usual use of jQuery.
If jQuery is desired to be used otherwise is requires the Ember prefix.
Handlebars is likewise available as Ember.Handlebars, albeit the Ember extended version.
I solved the problem by adding this code to my JS file
import jQuery from 'ember';
Newer versions of Ember/Ember-CLI allow for destructuring, making importing libraries much easier.
import Ember from 'ember';
const { $, get, set } = Ember;
Would bring in jquery, getters and setters.
Make sure you've listed #ember/jquery in your dependencies within package.json of the consumed app/addon. It might look something like this:
"#ember/jquery": "^1.1.0"
Then you can continue to use jquery in the recommended way:
import $ from 'jquery';
I'm using the ember-rails gem and following along with the starter screencast on the Emberjs.com site. When I create this link
<li>{{#link-to 'about'}} About {{/link-to}}</li>
It's giving me this error
Uncaught Error: Handlebars error: Could not find property 'link-to' on object <(generated application controller):ember280>.
There's a StackOverflow question that deals with this issue Helpers not properly defined in application template?. One answer says that
When you use Handlebars.compile it uses the handlebars script instead
of the Ember script. Ember has its own handlebars object that extends
the original Handlebars object with extra templates.
and gives this example
Ember.TEMPLATES["application"] = Ember.Handlebars.compile("{{#linkTo 'dashboard'}}Dashboard{{/linkTo}}")
However, I'm unclear where to put that code, and would it need to be done for every link?
I suspect you're running an older version of ember. Try running this to get the latest version of Ember into your app.
rails generate ember:install --head