# Aurelia-Dialog error on open

**URL:** <https://discourse.aurelia.io/t/aurelia-dialog-error-on-open/3835>\
**Category:** Help Requests\
**Created:** [October 12, 2020, 5:46pm UTC](https://discourse.aurelia.io/t/aurelia-dialog-error-on-open/3835 "2020-10-12T17:46:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [October 12, 2020, 5:46pm UTC](https://discourse.aurelia.io/t/aurelia-dialog-error-on-open/3835/1 "2020-10-12T17:46:33Z")

</div>

I am attempting to use aurelia-dialog to open a popup from my main view model.

When I try to use: `this.dialogService.open`, I get the following error:

```auto
aurelia-dialog.js:292 Uncaught TypeError: Cannot read property 'createChild' of undefined
    at DialogService.open (VM189 entry-bundle.js:18912)
    at Customer.open_consolidations (VM189 entry-bundle.js:199)
    at CallScope.evaluate (VM189 entry-bundle.js:13641)
    at Listener.callSource (VM189 entry-bundle.js:17370)
    at Listener.handleEvent (VM189 entry-bundle.js:17379)
    at DelegateHandlerEntry.handleEvent (VM189 entry-bundle.js:15441)

```

I have created a gist to show my error:

> **[Dumber Gist](https://gist.dumber.app/?gist=2ace614838a15ccb525bcf80250378b4&open=src%2Fcustomer.html)**

Any insight is appreciated.

---

<div class="post-metadata">

**Author:** ![avrahamcool](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/avrahamcool/32/368_2.png) [@avrahamcool](https://discourse.aurelia.io/u/avrahamcool)\
**Post date:** [October 12, 2020, 7:49pm UTC](https://discourse.aurelia.io/t/aurelia-dialog-error-on-open/3835/2 "2020-10-12T19:49:35Z")

</div>

I’ve played a little bit with you gist, but didn’t find the reason for the error.

but just as an FYI: you use `querySelector` to get a reference to a `div` in the view.  
you should use `ref` instead.  
also: if you use aurelia correctly - you should not have the need for JQuery at all…

---

<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:** [October 12, 2020, 10:08pm UTC](https://discourse.aurelia.io/t/aurelia-dialog-error-on-open/3835/3 "2020-10-12T22:08:22Z")

</div>

There are many mistakes in your code.

1. the usage of dependency injection in constructor is wrong. The component should not create an instance of a class by itself, that’s the very reason of using depedency injection (acquire dependency from outside, not creating).
2. missing dependency DialogController in the dialog js code.
3. missing dom `<ux-dialog>` in dialog html code, wrong tag `<ux-dialog-head>`, it’s `<ux-dialog-header>`, and you have no local `style.css`.
4. `<title></title>` would not work, title is a special tag name used in html head section, it’s by default not displayed when using in html body section.  
[https://gist.dumber.app/?gist=eea0870faa4b22b4978d8f8943267410](https://gist.dumber.app/?gist=eea0870faa4b22b4978d8f8943267410)

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [October 13, 2020, 3:27pm UTC](https://discourse.aurelia.io/t/aurelia-dialog-error-on-open/3835/4 "2020-10-13T15:27:18Z")

</div>

Thank you for your fixes. I am now moving this stuff into my app, and hopefully it goes well.