FastBoot Quickstart: Error on rendering data

Ember CLI
1

What does this error mean?

Uncaught (in promise) Error: Attempted to resolve a value in a strict mode template, but that value was not in scope: model
1 Like
2

is there more to the error stack trace? more context might help.

If you’re not familiar with “template strict mode” it is the foundation of the new programming model in Ember where (if a template is strict mode) you must import or declare anything used in that template.

For example, a sidebar component i was just playing around with:

import { LinkTo } from '@ember/routing';
import { array, component, hash } from '@ember/helper';
import challenges from '../challenges';

const join = (segments) => segments.join('.');

const SidebarItem = <template>
  <li class="p-1">
    <LinkTo @query={{hash id=(join (array @prefix @id))}}>{{@title}}</LinkTo>
  </li>
</template>

const SidebarCategory = <template>
  <li class="font-bold pt-2">{{@title}}</li>
  {{yield (component SidebarItem prefix=@id)}}
</template>

export default <template>
  <ul class="w-64 p-2">
    {{#each-in challenges as |catId category|}}
      <SidebarCategory @title={{category.title}} @id={{catId}} as |Item|>
        {{#each-in category.challenges as |cid challenge index|}}
          <Item @id={{cid}} @title={{challenge.title}} />
        {{/each-in}}
      </SidebarCategory>
    {{/each-in}}
  </ul>
</template>

As you can see at the top i import a local object challenges, which is used directly in one of the templates, i also created a helper called join in this file which the templates use, and i also have to import <LinkTo /> and the array, component, and hash helpers.

In “classic” ember templates there is an “ambient” scope which contains anything looked up via the resolver, such as your own components and helpers, the Ember core helpers (such as array, hash, component), etc. It’s not explicit where those things are coming from because there’s no importing. With “strict mode” templates we can create very powerful tools around this because we can statically analyze templates and know exactly what is “in scope” just like strict mode javascript which at one point was a big new thing but now is just kinda the default.

So anyway… this error means that some template is referencing model but that it can’t find where it’s declared, e.g. it’s not “in scope”. I think more of the stack trace could help us figure out where this is happening. I’m not super familiar with FastBoot but happy to dig in.

2 Likes
3

I was just testing fastboot with their quickstart example: https://ember-fastboot.com/quickstart

I finally opted to used ember quickstart app. I don’t why when you create an app with instructions on fastboot website it cannot work. Even if you add another route it still loads the default page.