Template compiler not loaded

[ianpetzer]

Hi there,

I would love to use this addon in our app ... Looks amazing! However when I install and it the resolver my app no longer boots in the browser and logs the following error

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

This is coming from the precompile function:

 enifed('ember-template-compiler/system/precompile'

Any suggestions on where to look?

[ianpetzer]

I can confirm that I've got the following file:

/node_modules/ember-source/dist/ember-template-compiler.js

I'm running off ember-source v 3.1

[ianpetzer]

I've tried emebr 3.2.1 and 3.3.0-beta.2 and they both give me the following error

Uncaught TypeError: Ember.HTMLBars.compile is not a function

Which is coming out of the HotReplacementComponent in the layout attribute when it try to run the following:

 const HotReplacementComponent = Ember.Component.extend(_hotComponent.default, {
....
layout: Ember.computed(function () {
....
  return Ember.HTMLBars.compile(`

[toranb]

@ianpetzer what does your ember-cli-build look like right now? Someone last week found they were not running defaults for some odd reason and that failed to execute the line that pulls in the template compiler at build time. Another thing to ask - what env are you trying this with? Right now we focus on development and bail if production or test is found instead.

https://github.com/toranb/ember-cli-hot-loader/blob/master/index.js#L32

[ianpetzer]

Hi @toranb ... Great to hear from you. Thanks so much for the help.

We are currently passing the defaults through to the ember app. You can see our ember-cli-build here: https://gist.github.com/ianpetzer/f7187cefa341a8b4b47057195b4a7bb7

We are running in development mode

Any other ideas?

[toranb]

Before we get ahead of ourselves and start console logging from node ... you mind cloning this example on your machine to see if it hot reloads both HBS and JS files for components?

note: this will not hot reload any controllers, routes or controller templates

[toranb]

https://github.com/toranb/ember-hot-reload-demo

[ianpetzer]

Yes that is working.. Can make changes to component templates without full reload. So cool!!!!

On Thu, Jun 21, 2018 at 4:03 PM Toran Billups notifications@github.com wrote:

https://github.com/toranb/ember-hot-reload-demo

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/toranb/ember-cli-hot-loader/issues/78#issuecomment-399114654, or mute the thread https://github.com/notifications/unsubscribe-auth/ABHZh_fTfDpwU-i0D9J7PG_dCnJFlJa9ks5t-6elgaJpZM4UxnDe .

[toranb]

ok so some good news - now do you have an app/resolver file? what is in it?

[ianpetzer]

Resolver:

import Resolver from 'ember-resolver';
import HotReloadMixin from 'ember-cli-hot-loader/mixins/hot-reload-resolver';

export default Resolver.extend(HotReloadMixin);

app.js: https://gist.github.com/ianpetzer/c89a00c6253bb2e28fe99d2c264927b6

FYI. I have included all of my addons into the hot-reload demo app and it continues to work

[toranb]

Well it might be time to hit the 2 hot paths quick and see if they are working as designed

**

First step is to open chrome dev and put a break point on this line in the hot reload component itself.

https://github.com/toranb/ember-cli-hot-loader/blob/master/addon/components/hot-replacement-component.js#L86

Next after you change any hbs/JS file step down into this function and see if it has a match for pods/or classic ember-cli filesystem layout. You should be able to see why it's failing within 1 of those 2 lookups (unless you are using module unification for layout - that isn't supported yet).

If that is working as planned, meaning it finds a match for classic or pods ... then I'd put a debugger here to see if the live reload plugin is attached/installed/working (ensure you do a full page refresh after you add this debugger -it only hits this 1X when the page loads for the very first time)

https://github.com/toranb/ember-cli-hot-loader/blob/master/addon/instance-initializers/hot-loader-livereload-plugin.js#L72

If that returns w/out running the line below "hot reload" won't work

window.LiveReload.addPlugin(Plugin);

If that is working fine^ ... put a ui.writeLine in the node_modules/ember-cli-hot-loader/lib/hot-reloader.js file around this line

https://github.com/toranb/ember-cli-hot-loader/blob/master/lib/hot-reloader.js#L19

^See what strings if any are in the array for supportedTypes

Finally put a ui.writeLine just above this line to see what the filePath & reloadJsPattern are

https://github.com/toranb/ember-cli-hot-loader/blob/master/lib/hot-reloader.js#L34

Those are the ember-cli side of the change detection so look for that output in your terminal. I'm curious if something isn't matching in that shouldReload logic

Sorry for all that detail but we tried just about everything else I can think of :)

[ianpetzer]

Wow.. Thanks so much for the detailed debug instructions!

I tried out the instructions in the browser but couldn't hit the breakpoint because it was first running into the error:

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

This is coming from https://github.com/toranb/ember-cli-hot-loader/blob/0a6ba03154b484eaeee5017eaf3d793a1733c764/addon/components/hot-replacement-component.js#L66 . I can hit a break point there as I boot the app in the browser but it falls over immediately after the call to Ember.HTMLBars.compile

I then tried out debugging the ember-cli stuff and from what I can see, it seems to be working fine. I was even getting this logged to the console:

Skipping livereload for: app/components/nav-bar/main/template.hbs

However, trying to debug through this has made me wonder about the error message that I'm getting in the browser. So I added the following line to my ember-cli-build.js

app.import('node_modules/ember-source/dist/ember-template-compiler.js');

And now, although I'm still not getting to the ember-cli-hot-reload breakpoints, at least some of the page is rendering until it falls over with the following error:

currentWhen.split is not a function TypeError: currentWhen.split is not a function
at Class._isActive (http://localhost:4200/assets/vendor.js:32775:39)

So.. armed with this knowledge, I was wondering if my app should be loading the template compiler into the browser? Otherwise my app seems unable to run Ember.HTMLBars.compile('') even from the console. ... However if I go to the Hot reload demo app and run Ember.HTMLBars.compile('') in the console it returns a FactoryWrapper

[toranb]

Hmm now I'm curious what version of ember-cli you are using. I'd assume ember-cli v3.1 since you mentioned ember source v3.1 but I wanted to double check. Next on the list is to see if the index.js file for this runs thru the lines you see below (or if it fails to bolt on the import)

https://github.com/toranb/ember-cli-hot-loader/blob/master/index.js#L27-L38

    var bowerPath = path.join(app.bowerDirectory, 'ember', 'ember-template-compiler.js');
    var npmCompilerPath = path.join('ember-source', 'dist', 'ember-template-compiler.js');
    var npmPath = require.resolve(npmCompilerPath);

    // Require template compiler as in CLI this is only used in build, we need it at runtime
    if (fs.existsSync(bowerPath)) {
      app.import(bowerPath);
    } else if (fs.existsSync(npmPath)) {
      app.import(npmPath);
    } else {
      throw new Error('Unable to locate ember-template-compiler.js. ember/ember-source not found in either bower_components or node_modules');
}

[ianpetzer]

Hi again,

I can confirm that my ember-cli version is 3.1.2

I managed to step through that code and the code ran the app.import(npmPath) line. From what I could see it all seemed good but here is a screenshot showing that it successfully managed to resolve the npm path the the compiler in ember-source https://ibb.co/j4e79o

On Fri, Jun 22, 2018 at 2:22 PM Toran Billups notifications@github.com wrote:

Hmm now I'm curious what version of ember-cli you are using. I'd assume ember-cli v3.1 since you mentioned ember source v3.1 but I wanted to double check. Next on the list is to see if the index.js file for this runs thru the lines you see below (or if it fails to bolt on the import)

https://github.com/toranb/ember-cli-hot-loader/blob/master/index.js#L27-L38

var bowerPath = path.join(app.bowerDirectory, 'ember', 'ember-template-compiler.js');
var npmCompilerPath = path.join('ember-source', 'dist', 'ember-template-compiler.js');
var npmPath = require.resolve(npmCompilerPath);

// Require template compiler as in CLI this is only used in build, we need it at runtime
if (fs.existsSync(bowerPath)) {
  app.import(bowerPath);
} else if (fs.existsSync(npmPath)) {
  app.import(npmPath);
} else {
  throw new Error('Unable to locate ember-template-compiler.js. ember/ember-source not found in either bower_components or node_modules');

}

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/toranb/ember-cli-hot-loader/issues/78#issuecomment-399424468, or mute the thread https://github.com/notifications/unsubscribe-auth/ABHZh_1_oqLRD_niyuS5q7szZ9gs6Pa3ks5t_OF7gaJpZM4UxnDe .

[toranb]

From that screenshot I see you are in a folder named 5b but then under that folder is another named b5b which got me thinking ... what folder are you running the ember s command from? and what folder has the ember app inside? Just curious - I've seen a wide variety of mono repo file structures and wanted to learn more about your setup to understand what is truly different between the demo app (that works fine on your machine) and this app which can't seem to find the template compiler without a custom app.import that you add to the ember-cli-build.js file

[ianpetzer]

Hi,

I'm running ember s from /5b/b5b ... I know its weird! The app is called b5b .. short for big 5 boutique which is our old company name

We are using pods and the ember app directory structure starts in 5b/b5b As far as I could tell it managed to successfully run the command to include the compiler.. ie this boolean condition evaluated to true: https://github.com/toranb/ember-cli-hot-loader/blob/master/index.js#L34 resulting in the app import being run here https://github.com/toranb/ember-cli-hot-loader/blob/master/index.js#L35

Thanks for all the effort you are putting into this! Ian

On Sat, Jun 23, 2018 at 4:34 PM Toran Billups notifications@github.com wrote:

From that screenshot I see you are in a folder named 5b but then under that folder is another named b5b which got me thinking ... what folder are you running the ember s command from? and what folder has the ember app inside? Just curious - I've seen a wide variety of mono repo file structures and wanted to learn more about your setup to understand what is truly different between the demo app (that works fine on your machine) and this app which can't seem to find the template compiler without a custom app.import that you add to the ember-cli-build.js file

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/toranb/ember-cli-hot-loader/issues/78#issuecomment-399682815, or mute the thread https://github.com/notifications/unsubscribe-auth/ABHZhwWNOpm3bG_3tGlHxXU6kfGP2WSlks5t_lHhgaJpZM4UxnDe .

[toranb]

@ianpetzer sorry for the gap in communication - got a nasty head cold late last week and took some time off to recover :)

Today I published a v1.0 of the hot reloader and I'm curious if you still bump into the same issues reported previously. One last question I'm not sure I've asked yet but is relevant ...

How is that that you run ember serve to try this from /5b/b5b directory? Do you give it a specific env for staging or is it just plain ol' ember s like normal?

[ianpetzer]

Hi,

Sadly v1.0 isn't working for me either :(

I run ember in development mode using the following command: ember server --proxy http://localhost:3000

On Sun, Jul 1, 2018 at 5:04 PM Toran Billups notifications@github.com wrote:

@ianpetzer https://github.com/ianpetzer sorry for the gap in communication - got a nasty head cold late last week and took some time off to recover :)

Today I published a v1.0 of the hot reloader and I'm curious if you still bump into the same issues reported previously. One last question I'm not sure I've asked yet but is relevant ...

How is that that you run ember serve to try this from /5b/b5b directory? Do you give it a specific env for staging or is it just plain ol' ember s like normal?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/toranb/ember-cli-hot-loader/issues/78#issuecomment-401612428, or mute the thread https://github.com/notifications/unsubscribe-auth/ABHZh7BFJ4g23wwnbEoW-8S8DZ9Txmonks5uCOTsgaJpZM4UxnDe .

[ianpetzer]

FYI.. Not sure if this helps but when I don't have ember-cli-hot-loader installed, I'm able to add the ember compiler to ember-cli-build file, and then in the browser console I can resolve the Ember.HTMLBars.compile function

However as soon as I include ember-cli-hot-loader addon and the resolver, I get this error

b5b.js:21879 currentWhen.split is not a function TypeError: currentWhen.split is not a function
at Class._isActive (http://localhost:4200/assets/app.js:32781:39)

It is actually falling over here:

https://github.com/emberjs/ember.js/blob/f8ad8d9ff81cd1746339f273cb150141d75e6974/packages/ember-glimmer/lib/components/link-to.ts#L542

Basically the qualifiedRouteName prop is returning an array instead with one object in instead of a String, so the code falls over when you call split. If I step through, it appears that targetRouteName is also being returned as an array with a single entry in.

Not sure if that gives a clue?

[toranb]

Wow that is a new one for sure. Would you have the time to narrow that further to see what the smallest component looks like using link-to when this breaks? That might help me identify when/why :)

[lukemelia]

FYI, I'm getting this error as well, using 1.0.0 on an ember/ember-cli 3.1 app. Haven't dug in or read the entirety of this thread yet, but happy to share any details that may be helpful in troubleshooting.

[toranb]

wow worst v1.0 launch in history ... sorry all

I'm curious if anyone can reproduce this in a real app for me - The demo apps/ my work stuff/ anything I've tried this with so far is g2g with ember v2.18+

@lukemelia in your example -what directory structure do you install/run ember s from and do you use a global or local ember-cli to run it?

[lukemelia]

@toranb:

➜  dashboard git:(master) pwd
/Users/lmelia/p/yapp/dashboard
➜  dashboard git:(master) which ember
/usr/local/bin/ember
➜  dashboard git:(master) ember --version
[snipped deprecation warnings...]
ember-cli: 3.1.4
node: 6.14.3
os: darwin x64

[toranb]

@lukemelia which of the issues mentioned in this thread are you having trouble with?

1) link-to 2) template compiler not found

If template compiler related -what if you run ember s from a local node_modules folder like so?

output from which ember

/Users/toranb/code/ember/node_modules/.bin/ember

[lukemelia]

My error is the following run-time browser exception:

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

If I run it with: ./node_modules/.bin/ember s, I still get the same error.

I I run it with /Users/lmelia/p/ember/ember.js/node_modules/.bin/ember s, I also still get the same error.

[lukemelia]

The ember-template-compiler issue can be resolved by changing https://github.com/toranb/ember-cli-hot-loader/blob/a2e5e3efd603f93c24b80f3d2a0a23fc6a8d6faa/index.js#L30 from:

    var npmPath = require.resolve(npmCompilerPath);

to

    var npmPath = path.relative(app.project.root, require.resolve(npmCompilerPath));

There was something about the absolute path that was fouling up app.import internals which explicitly look for a string starting with "node_modules/".

[toranb]

Thanks Luke! I'll PR this and publish v1.0.1 tonight when I get home :)

[toranb]

This template compiler not loaded problem is now fixed in v1.0.1 thanks to the help from Luke!

[ianpetzer]

Aahh nice work @lukemelia and @toranb .. I can confirm that v1.0.1 now correctly includes the template compiler into the payload for me, which then immediately results in the link-to error.

I will open another issue to track