Ember JS Please load `ember-template-compiler.js` prior to calling `compile`

Question

I am still getting the error below despite having following the instructions on this link Ember.js: HtmlBars and the Handlebars.compile command.

Below I have copied and pasted my package.json,bower.json and brocfile.js. Not sure what is causing the issue.

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

package.json

    {
  "name": "ui",
  "version": "0.0.0",
  "description": "Small description for ui goes here",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "start": "ember server",
    "build": "ember build",
    "test": "ember test"
  },
  "repository": "",
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "bower": "^1.3.12",
    "broccoli-asset-rev": "^2.0.2",
    "broccoli-funnel": "^0.2.3",
    "broccoli-merge-trees": "^0.2.1",
    "ember-cli": "0.2.7",
    "ember-cli-app-version": "0.3.3",
    "ember-cli-babel": "^5.0.0",
    "ember-cli-content-security-policy": "0.4.0",
    "ember-cli-cookie": "^0.1.0",
    "ember-cli-dependency-checker": "^1.0.0",
    "ember-cli-htmlbars": "0.7.6",
    "ember-cli-ic-ajax": "0.1.1",
    "ember-cli-inject-live-reload": "^1.3.0",
    "ember-cli-less": "^1.1.1",
    "ember-cli-pusher": "0.1.2",
    "ember-cli-qunit": "0.3.13",
    "ember-cli-simple-auth": "^0.7.3",
    "ember-cli-simple-auth-oauth2": "^0.7.2",
    "ember-cli-simple-auth-torii": "^0.8.0-beta.1",
    "ember-cli-tooltipster": "0.0.6",
    "ember-cli-uglify": "^1.0.1",
    "ember-data": "1.0.0-beta.18",
    "ember-disable-proxy-controllers": "^1.0.0",
    "ember-export-application-global": "^1.0.2",
    "ember-idx-button": "^0.1.3",
    "ember-idx-forms": "^0.5.1",
    "ember-mousetrap": "0.2.0",
    "ember-template-compiler": "^1.9.0-alpha",
    "express": "^4.8.5",
    "glob": "^4.0.5",
    "torii": "^0.3.3"
  }
}

bower.json

{
  "name": "ui",
  "dependencies": {
    "ember": "1.12.0",
    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "rwjblue/ember-cli-test-loader#0.1.3",
    "ember-data": "1.0.0-beta.18",
    "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4",
    "ember-qunit": "0.3.3",
    "ember-qunit-notifications": "0.0.7",
    "ember-resolver": "~0.1.15",
    "jquery": "^1.11.1",
    "loader.js": "ember-cli/loader.js#3.2.0",
    "qunit": "~1.17.1",
    "bootstrap": "~3.3.4",
    "ember-addons.bs_for_ember": "~0.7.0",
    "slick.js": "~1.4.0",
    "jquery-mousewheel": "~3.1.12",
    "videojs-youtube": "~1.2.8",
    "tooltipster": "~3.3.0",
    "owl-carousel2": "latest",
    "ember-mousetrap": "~0.2.0",
    "ember-validations": "2.0.0-alpha.3",
    "rsvp": "~3.0.18",
    "bootswatch": "v3.3.4+1",
    "ember-simple-auth": "0.7.3",
    "progressbar.js": "~0.8.1",
    "jquery-autocomplete": "~1.1.1",
    "jssocials": "~0.2.0",
    "ember-pusher": "0.1.1"
  },
  "resolutions": {
    "ember-cli-test-loader": "0.1.3",
    "ember-load-initializers": "0.1.4",
    "loader.js": "3.2.0",
    "ember": "1.12.0",
    "ember-data": "1.0.0-beta.18",
    "ember-qunit": "0.3.3",
    "ember-qunit-notifications": "0.0.7",
    "jquery": "^1.11.1",
    "select2": "~4.0.0"
  }
}

Brocfile.js

    /* global require, module */

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

var pickFiles = require('broccoli-funnel');
var mergeTrees = require('broccoli-merge-trees');

var app = new EmberApp();

app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-core.max.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-notifications.max.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-alert.max.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-button.max.js');
app.import('bower_components/ember-addons.bs_for_ember/dist/js/bs-modal.max.js');

app.import('bower_components/bootstrap/js/modal.js');
app.import('bower_components/bootstrap/js/dropdown.js');

// TF - Start
app.import('bower_components/rsvp/rsvp.js');
app.import('bower_components/tooltipster/css/themes/tooltipster-light.css');


app.import('bower_components/mousetrap/mousetrap.js');
app.import('app/styles/custom.css');

//JSSocial
app.import('bower_components/jssocials/dist/jssocials.css');
app.import('bower_components/jssocials/dist/jssocials-theme-flat.css');
app.import('bower_components/jssocials/dist/jssocials.js');
app.import('bower_components/font-awesome/css/font-awesome.min.css');


//Progressbar.js
app.import('bower_components/progressbar.js/dist/progressbar.min.js');
app.import('bower_components/progressbar.js/local-dev/main.css');


//https://stackoverflow.com/questions/28213301/ember-js-htmlbars-and-the-handlebars-compile-command
app.import('bower_components/ember/ember-template-compiler.js');

var fontAwesome = pickFiles('bower_components/font-awesome/fonts',{
    srcDir: '/',
    files: ['fontawesome-webfont.eot','fontawesome-webfont.svg','fontawesome-webfont.ttf','fontawesome-webfont.woff','fontawesome-webfont.woff2','FontAwesome.otf'],
    destDir: '/fonts'
});

var videojsFonts = pickFiles('bower_components/video.js/dist/video-js/font',{
    srcDir: '/',
    files: ['vjs.ttf','vjs.woff'],
    destDir: '/assets/font'
});

var bootstrapFonts = pickFiles('bower_components/bootstrap/fonts',{
    srcDir: '/',
    files: ['glyphicons-halflings-regular.eot','glyphicons-halflings-regular.svg','glyphicons-halflings-regular.ttf','glyphicons-halflings-regular.woff','glyphicons-halflings-regular.woff2'],
    destDir: '/assets/fonts'
});


module.exports = mergeTrees([app.toTree(), videojsFonts, bootstrapFonts, fontAwesome]);

config/environment.js

/* jshint node: true */

module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'ui',
    environment: environment,
   // firebase: 'https://blistering-torch-5880.firebaseio.com/',
    baseURL: '/',
    locationType: 'auto',
    'simple-auth': { 
                    /*
                      The authenticationRoute is where the app will redirect
                      if it enters an authenticated route without being authenticated
                      */
                     authenticationRoute: 'session',
                     authorizer: 'simple-auth-authorizer:oauth2-bearer',
                     crossOriginWhitelist: ['http://localhost:9990/'] 
                  },
    torii: {
      providers: {
        // https://developers.facebook.com/docs/facebook-login/permissions/v2.3
        'facebook-connect': {
          appId: '**************',
          scope: 'public_profile,email,user_friends,user_likes,user_education_history'
        },
        'google-oauth2-bearer': {
          //https://console.developers.google.com/project/275897053280/apiui/credential?authuser=0
            redirectUri: 'http://localhost:4200/',
            apiKey: '********************,
            scope: 'https://www.google.com/m8/feeds'
        }
      }
    },            
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. 'with-controller': true
      }
    },

    // Here you can pass flags/options to your application instance
    // when it is created
    APP: {
      // https://pusher.com/docs/client_api_guide/client_connect#connecting
      PUSHER_OPTS: {
            key: '***************',
            connection: { authEndpoint: 'http://localhost:9990/api/v1/auth/pusher', encrypted: true },
            logAllEvents: true,
            //https://pusher.com/docs/authenticating_users#authEndpoint/lang=cs-mvc
        }
    }
  };

ENV.contentSecurityPolicy = {
   'default-src': "'none'",
    'script-src': "'self' 'unsafe-eval' https://www.youtube.com/ https://s.ytimg.com/",
    'font-src': "'self' data: http://fonts.gstatic.com/", 
    'connect-src': "'self' http://localhost:9990 wss://*.firebaseio.com ws://ws.pusherapp.com/",
    'img-src': "'self' http://i2.ytimg.com https://img.youtube.com/ data:",
    'style-src': "'self' 'unsafe-inline' http://fonts.googleapis.com/", //'unsafe-inline', I believe was required 
    'media-src': "'self'",
    'frame-src': "'self' https://img.youtube.com/ https://www.youtube.com/ ",
    'report-uri': "http://localhost:4200" //https://github.com/rwjblue/ember-cli-content-security-policy/issues/12
}


  if (environment === 'development') {
    // ENV.APP.LOG_RESOLVER = true;
    ENV.APP.LOG_ACTIVE_GENERATION = true;
    // ENV.APP.LOG_TRANSITIONS = true;
    // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
    ENV.APP.LOG_VIEW_LOOKUPS = true;
  }

  if (environment === 'test') {
    // Testem prefers this...
    ENV.baseURL = '/';
    ENV.locationType = 'auto';

    // keep test console output quieter
    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.LOG_VIEW_LOOKUPS = false;

    ENV.APP.rootElement = '#ember-testing';
  }

  if (environment === 'production') {

  }

  return ENV;
};

This is the specific place in the code causing the issue:

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

       exports['default'] = function (templateString, options) {
        if (!compile && Ember.__loader.registry["htmlbars-compiler/compiler"]) {
          compile = requireModule("htmlbars-compiler/compiler").compile;
        }

        if (!compile) {
          throw new Error("Cannot call `compile` without the template compiler loaded. Please load `ember-template-compiler.js` prior to calling `compile`.");
        }

Answer 1

For loading on Ember 1.x up to 2.12.x you need to put in ember-cli-build.js (as answered in other questions)

app.import('bower_components/ember/ember-template-compiler.js');

For Ember 2.13 and above (glimmer2 and new approach without bower) I had to load with this import on ember-cli-build.js with:

app.import('vendor/ember/ember-template-compiler.js');

Answer 2

You are using version 1.12 of ember but version 1.10-beta3 of ember-template-compiler. Use the version of ember-template-compiler included with Ember 1.12 as follows:

app.import('bower_components/ember/ember-template-compiler.js');

Note that ember-template-compiler is no longer a separate bower repository, but is included in Ember.

Unfortunately, the accepted answer to the linked SO question is no longer correct. The highest voted answer (just below) is now the correct answer.

Also note that pickFiles and broccoli-static-compiler are deprecated. With ember-cli 0.2.7, you need to use broccoli-funnel.

Answer 3

I had to do this also. I needed to add the import below.

app.import('bower_components/ember/ember-template-compiler.js');

---

Checkout the answer here