I can't compile Ember.handlebar templates

Ember CLI
1

I am exploring EmberJS for the first time. I installed Ember according to the Getting Started guide at emberjs.com. The version I am using is 1.13.1

I’m using Mozilla Firefox 39.0 and When I enter the following code into the Web Console:

var view = Ember.View.create(); var template Ember.Handlebars.compile(“testing”);

I got the following error:

Error: Cannot call compile without the template compiler loaded. Please load ember-template-compiler.js prior to calling compile.

Any ideas?

2

The ember-template-compiler.js is only required for template compilation. The runtime dependencies for HTMLBars are built into the framework file.

To include the htmlbars runtime in your ember-cli app:

// Brocfile.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();
app.import(app.bowerDirectory + '/ember/ember-template-compiler.js');
module.exports = app.toTree();
3

When I run the following line:

var EmberApp = require(‘ember-cli/lib/broccoli/ember-app’);

I get the following error:

Error: Could not find module ember-cli/lib/broccoli/ember-app

I checked the file path and ember-app.js exists there.

Tried using the absolute path:

C:\Users\MyUserName\my-app\node_modules\ember-cli\lib\broccoli\ember-app

and still got the error.

I then add the node_modules to the front of the path and I still got the error

I must admit my javascript is a bit rusty so any help would be appreciated.

4

I also tried uninstalling/re-installing and I discovered something that indicates I may have been barking up the wrong tree:

Installing packages for tooling via npm…gyp ERR! configure error gyp ERR! stack Error: Can’t find Python executable “python”, you can set the PYT HON env variable. gyp ERR! stack at failNoPython (C:\Users\asolonin\AppData\Roaming\npm\node_m odules\ember-cli\node_modules\npm\node_modules\node-gyp\lib\configure.js:114:14)

gyp ERR! stack at C:\Users\asolonin\AppData\Roaming\npm\node_modules\ember-c li\node_modules\npm\node_modules\node-gyp\lib\configure.js:69:11 gyp ERR! stack at FSReqWrap.oncomplete (evalmachine.:95:15) gyp ERR! System Windows_NT 6.1.7601 gyp ERR! command “node” “C:\Users\asolonin\AppData\Roaming\npm\node_module s\ember-cli\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js” “rebu ild”

I’m getting a bunch of errors related to not finding Python. I’m going to check my path and the PYTHON env variable as suggested in the output.

5

What did your Brocfile look like before making this change?

6

Error: Could not find module ember-cli/lib/broccoli/ember-app

The error looks like you did not have the ember-cli module installed locally in your project. Please check if you have node_modules/ember-cli inside your project directory. If not, you need to run npm install to fetch all the dependencies.

I then add the node_modules to the front of the path and I still got the error

That makes NodeJS lookup the path node_modules/node_modules/ember-cli/lib/broccoli/ember-app which, of course, is incorrect.

7

Downloading Python and putting in the path fixed the “Python” errors

Now I’m getting the following build error:

MSBUILD : error MSB3428: Could not load the Visual C++ component “VCBuild.exe”. To fix this, 1) install the .NET Framework 2.0 SDK, 2) install Microsoft Visua l Studio 2005 or 3) add the location of the component to the system path if it is installed elsewhere. [C:\Users\asolonin\my-app\node_modules\ember-cli\node_ modules\testem\node_modules\socket.io\node_modules\socket.io-client\node_module s\engine.io-client\node_modules\ws\node_modules\bufferutil\build\binding.sln] gyp ERR! build error

What is the Brocfile? Is this Brocfile.js?

8

When I search the my-app folder and its subfolders for “Brocfile” I get a bunch of folders named brocfile-test

9

My mistake I actually found 3 Brocfile.js in the following folders:

C:\Users\asolonin\my-app\node_modules\ember-cli\tests\fixtures\brocfile-tests\no-ember-cli-build

C:\Users\asolonin\my-app\node_modules\ember-cli-babel

C:\Users\asolonin\my-app\node_modules\ember-cli-content-security-policy

Which one should I be interested in?

10

Sorry, the entry file is now ember-cli-build.js not Brocfile.js, that changed recently. And it’s in the root of your app’s folder.

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {});
  app.import(app.bowerDirectory + '/ember/ember-template-compiler.js');
  return app.toTree();
};
11

BINGO! That worked. The compile issue is solved.

Thanks Jason

12

FYI - Brocfile.js has been replaced with ember-cli-build.js in the latest version of ember-cli. They’re practically the same but ember-cli-build.js exports a module.

1 Like