# Using require breaks router...?

**URL:** <https://discourse.aurelia.io/t/using-require-breaks-router/1411>\
**Category:** Help Requests\
**Created:** [July 9, 2018, 6:28pm UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411 "2018-07-09T18:28:48Z")\
**Posts on this page:** 15\
**Page:** 2

<div class="post-metadata">

**Author:** ![magnusdanielson](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/magnusdanielson/32/924_2.png) [@magnusdanielson](https://discourse.aurelia.io/u/magnusdanielson)\
**Post date:** [July 11, 2018, 8:52pm UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/21 "2018-07-11T20:52:32Z")

</div>

It works for me when bluebird is removed from aurelia.json prepend section. But that breaks IE11 if it is important for you. for me it is ☹

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [July 12, 2018, 2:02am UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/22 "2018-07-12T02:02:21Z")

</div>

@magnusdanielson If you dont need to use Bluebird’s promise cancellation feature, adding the following lines to your index html will make it work:

```auto
<script>Promise = undefined</script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script> 

```

I think it boils down to the following difference:

– **Native** –

 ![native-order](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/7d4b59991554fb53ae3eaf7bdcf1ddee32283da5.png)

– **Bluebird** –

 ![bluebird-order](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/ad5ec98d3ddfb92fb22664eb93115c361ee514bb.png)

Notice how the 2 “micro task resolved” is logged after “promise then chain resolved” in bluebird, which could cause this line [https://github.com/aurelia/router/blob/master/src/router.js#L204](https://github.com/aurelia/router/blob/master/src/router.js#L204) to run before the micro task queue that bindings (read Repeat) uses to process changes / model / render UI

* * *

That said, it still doesn’t explain why it worked before, and now it stops working.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [July 12, 2018, 4:06am UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/23 "2018-07-12T04:06:35Z")

</div>

The bug only affects end user when both issue(1) and issue(2) are present.

It worked before because issue(2) doesn’t exist before aurelia-templating-resources 1.7.0.

- issue 2 is absent

It worked on gistrun because the rjs-bundle doesn’t bundle bluebird.

- issue 1 is absent

This means the issue (1) (timing bug with bluebird) has been here for a long long time but didn’t manifest itself, like a recessive gene.

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [July 12, 2018, 10:48am UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/24 "2018-07-12T10:48:08Z")

</div>

So cool to watch you two get to the root of it (-:

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [July 19, 2018, 1:11pm UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/25 "2018-07-19T13:11:21Z")

</div>

@leo-mck in case you did not follow github issues. This bug has been fixed by @bigopon in latest aurelia release.

---

<div class="post-metadata">

**Author:** ![elmt1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elmt1/32/2687_2.png) [@elmt1](https://discourse.aurelia.io/u/elmt1)\
**Post date:** [July 20, 2018, 3:13pm UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/26 "2018-07-20T15:13:18Z")

</div>

Do you have a release or specifics on what fixed this. I have been having issues in a value converter when I moved to the following:

aurelia-binding 2.1.1 -\> 2.1.2  
aurelia-router 1.6.1 -\> 1.6.2  
aurelia-templating 1.8.1 -\> 1.8.2  
aurelia-templating-resource 1.7.0 -\> 1.7.1

One of those seems to have changed the order of the call to the value converter or when it is queued. With the latest version as of 2 days ago, the parameters into the value converter are undefined when I hit refresh (F5). They are available if I navigate to a page via the router. Something in the later version of these seems to have changed the order of execution somewhere.

Any advice? This is on a branch in my project that I set up about 3 months ago to move to webpack 4, but there is always something that is preventing me from merging it.

Thank you!

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [July 20, 2018, 9:20pm UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/27 "2018-07-20T21:20:10Z")

</div>

That sounds like a regression in aurelia-binding. If you can confirm it, please create a github issue in the repo.

You can read the release notes on github.

> **[aurelia/binding](https://github.com/aurelia/binding/releases)**
>
> A modern databinding library for JavaScript and HTML. - aurelia/binding

---

<div class="post-metadata">

**Author:** ![elmt1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elmt1/32/2687_2.png) [@elmt1](https://discourse.aurelia.io/u/elmt1)\
**Post date:** [July 21, 2018, 3:23pm UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/28 "2018-07-21T15:23:57Z")

</div>

Thank you for the help. I reasonably sure that there is an issue in one of those four packages, but I will narrow it down and try to see exactly what change caused the problem.

---

<div class="post-metadata">

**Author:** ![elmt1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elmt1/32/2687_2.png) [@elmt1](https://discourse.aurelia.io/u/elmt1)\
**Post date:** [July 21, 2018, 5:40pm UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/29 "2018-07-21T17:40:38Z")

</div>

I tested by upgrading each package one at a time until it broke. Now I know the problem is in aurelia-templating 1.8.1 -\> 1.8.2. Reverting that package fixes the error. Maybe the change to the composition-engine.js? I am out of time right now but will narrow it down further tonight.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [July 21, 2018, 10:35pm UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/30 "2018-07-21T22:35:38Z")

</div>

Can you share some code to reproduce it?

---

<div class="post-metadata">

**Author:** ![elmt1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elmt1/32/2687_2.png) [@elmt1](https://discourse.aurelia.io/u/elmt1)\
**Post date:** [July 22, 2018, 3:52am UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/31 "2018-07-22T03:52:59Z")

</div>

I tried to do this more simply but I am not sure how to set versions with gist so I made a simple project. To keep it similar to my project I used a fork based on a dotnet core/webpack setup by @MaximBalaganskiy. You can download from git. Just run the following to see it work:

git clone -b aurelia-template-error [https://github.com/elmt1/AureliaDotnetTemplate.git](https://github.com/elmt1/AureliaDotnetTemplate.git)  
npm install  
dotnet build  
dotnet run

You should see the text “home” on the page that is pulled in using a terminology value-converter. It should display “Home”.

To see it fail, delete the package-lock.json, node-modules directory and change the aurelia-templating to 1.8.2 in the package.json and run the commands above again. If you navigate away from the home page and come back it will work.

There are many ways to accomplish what this value converter is doing, so a work-around/better way might be the answer. However, the way I did this was simple and made sense to me. In my real applications a locale selection is defined in app.html and that feeds into the navigation and the rest of the application so defining and sharing the locale and terminology array in app.ts seemed OK.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [July 22, 2018, 9:10am UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/32 "2018-07-22T09:10:51Z")

</div>

@elmt1 thanks for reporting. This is really bad.

The issue is not value converter. The issue is in your `home.html`, you use `terminology` which is defined in `app.ts`, not `home.ts`.

The usage works (I mean before aurelia-templating v1.8.2) because of one Aurelia feature called `inheritBindingContext`. That flag is by default set to `true` for any router loaded component. So your `home` component actually can access the variables defined in `app` module through `overrideContext` on binding scope.

[The Aurelia team actually regretted on this default behaviour, but kept it anyway for not wanting to break backwards compatibility.](https://github.com/aurelia/templating-resources/issues/222)

Now aurelia-templating v1.8.2 just broke it, not directly, but by worsening an existing router bug.  
[https://github.com/aurelia/router/issues/612](https://github.com/aurelia/router/issues/612)

**Solution**

I don’t think you can wait for the router fix. I’m afraid the issue would not be fixed within few days.

As I stated above, the default inheritBindingContext behaviour is not recommended by Aurelia team, so it’s better to not rely on it.

You can retain the `terminology` object on your `LocaleService` itself, then inject `LocalService` to `home.ts` (or any component wants to access `terminology`).

In your `home.html`, you can access `localService.terminology`.  
Or you can add a computed property in `home.ts` to keep existing `home.html`.

---

<div class="post-metadata">

**Author:** ![elmt1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elmt1/32/2687_2.png) [@elmt1](https://discourse.aurelia.io/u/elmt1)\
**Post date:** [July 22, 2018, 4:10pm UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/33 "2018-07-22T16:10:42Z")

</div>

Thank you for the in-depth description. Are you saying this is not likely to be fixed until there is a 2.x version? I am actually about 5 months waiting for stability on a WebPack4 branch so a few weeks would be OK.

Originally, I was injecting the LocaleService into home.ts and was in the process of adding it to ~50 other components when I found it wasn’t necessary and I could reference variables in the containing component and refactored. Being lazy, I was very happy when I stumbled on this behavior.

I looked for documentation on inheritBindingContext. It seems to be fairly obscure. It is not mentioned in any of 5 books I have on Aurelia and what I found by searching seemed to imply the default is false and I see an instance of BehaviorInstruction defaults to false but a static reference defaults to true.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [July 22, 2018, 11:13pm UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/34 "2018-07-22T23:13:35Z")

</div>

> [@elmt1](#):
>
> Are you saying this is not likely to be fixed until there is a 2.x version?

Not that late I guess.

> [@elmt1](#):
>
> I looked for documentation on inheritBindingContext. It seems to be fairly obscure. It is not mentioned in any of 5 books I have on Aurelia and what I found by searching seemed to imply the default is false and I see an instance of BehaviorInstruction defaults to false but a static reference defaults to true.

It is not documented at all. There are 3 cases.

1. default to false, for normal component creation `<child-component></child-component>`
2. default to true, for router loaded view, through `<router-view></router-view>`. **This one is now broken due to the wrong lifecycle callback sequence.**
3. default to true, for dynamically composed view, by `<compose></compose>`.

It’s very obscure, to optionally turn it on for normal component:

```js
import {processContent} from 'aurelia-framework';
@processContent((compiler, resources, node, instruction) => {
  instruction.inheritBindingContext = true;
  return true;
})
export class ChildComponent {/*...*/}

```

---

<div class="post-metadata">

**Author:** ![elmt1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elmt1/32/2687_2.png) [@elmt1](https://discourse.aurelia.io/u/elmt1)\
**Post date:** [July 6, 2019, 2:54am UTC](https://discourse.aurelia.io/t/using-require-breaks-router/1411/35 "2019-07-06T02:54:10Z")

</div>

@huochunpeng, it has been a long time and I was starting to have issues with dependencies so I went ahead and used your suggestion to inject a singleton of the localeService. That worked, but added several hundred lines of code to my application because I was relying on this in a lot of places 🙂 I was adding to the message that it might be helpful in vNext to have the to declare a variable in a component as global.

While typing that, it occurred to me, why not just inject the singleton into the value converter? A quick test and it seems to work. I can now back out those several hundred lines of code but I am very happy because I end up with a cleaner implementation. Now I autoinject the the singleton onto the value converter containing the language translations and using it is simpler because I don’t have to pass anything but the value to translate. Big win for me.

[Previous page](https://discourse.aurelia.io/t/using-require-breaks-router/1411.md?page=1)