aurelia / aurelia/templating

Aurelia enhance() will crash if a <compose> element exists within a compiled component

Open
#654 4 comments 0 reactions 0 assignees View on GitHub
documentation question
Dominant language
TypeScript
Stars
113
Forks
101
PR merge metrics
No merged PRs in 30d

Description

**Related to this comment:**
https://github.com/aurelia/framework/issues/600#issuecomment-252479570

**Related gist from above comment:**
https://gist.run/?id=c59eed72e1c255b8f462c1d45e495a7a

**I'm submitting a bug report**

* **Library Version:**
1.8.2

**Please tell us about your environment:**
* **Operating System:**
Windows 10

* **Aurelia CLI OR JSPM OR Webpack AND Version**
Webpack

* **Browser:**
Chrome

* **Language:**
TypeScript

**Current behavior:**
If I use `aurelia.enhance(bindingContext, document.body)` on template that was run through the template compiler and has a element in it, I'll get a crash error.

```
TypeError: Cannot read property 'behaviorInstructions' of undefined
at applyInstructions (webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2438:42)
at ViewFactory.create (webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2706:7)
at TemplatingEngine.enhance (webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:5233:24)
at eval (webpack:///./node_modules/aurelia-framework/dist/native-modules/aurelia-framework.js?:489:28)
at Aurelia.enhance (webpack:///./node_modules/aurelia-framework/dist/native-modules/aurelia-framework.js?:487:12)
at eval (webpack:///./src/cypress/component-cypress-tester.ts?:195:44)
From previous event:
at eval (webpack:///./src/cypress/component-tester.ts?:153:48)
From previous event:
at eval (webpack:///./src/cypress/component-tester.ts?:116:70)
at eval (webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:132:12)
From previous event:
at bootstrap (webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:131:24)
at eval (webpack:///./src/cypress/component-tester.ts?:115:24)
at Context.eval (webpack:///./src/cypress/component-tester.ts?:114:20)
```

**Expected/desired behavior:**
I wouldn't expect this to crash. Currently my workaround is to run the following:
```ts
// NOTE: Jake: 2018-12-20
// Fix aurelia.enhance() problems that are occuring due to
// a in a component.
// Research: https://github.com/aurelia/framework/issues/600#issuecomment-252479570
// Gist: https://gist.run/?id=c59eed72e1c255b8f462c1d45e495a7a
document.body.querySelectorAll('.au-target').forEach((el) => {
el.classList.remove('au-target');
el.removeAttribute('au-target-id');
});

return aurelia.enhance(this.bindingContext, document.body).then(() => {
```

Contributor guide

Open the contributing guide

Research direction

Start with the linked gist and trace aurelia.enhance through TemplatingEngine.enhance, ViewFactory.create, and applyInstructions in aurelia-templating. Reproduce the compiled template containing a element and verify that enhance no longer crashes while processing it.

Written by the indexing model from the issue text.

Assessment

Tech stack
cypress, typescript, webpack
Domain
frontend, testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.