# Aurelia dialog not working when creating a custom aurelia plugin

**URL:** <https://discourse.aurelia.io/t/aurelia-dialog-not-working-when-creating-a-custom-aurelia-plugin/4355>\
**Category:** Help Requests\
**Created:** [August 5, 2021, 1:34pm UTC](https://discourse.aurelia.io/t/aurelia-dialog-not-working-when-creating-a-custom-aurelia-plugin/4355 "2021-08-05T13:34:50Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![dtaalbers](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dtaalbers/32/1412_2.png) [@dtaalbers](https://discourse.aurelia.io/u/dtaalbers)\
**Post date:** [August 5, 2021, 1:34pm UTC](https://discourse.aurelia.io/t/aurelia-dialog-not-working-when-creating-a-custom-aurelia-plugin/4355/1 "2021-08-05T13:34:50Z")

</div>

I can’t get the aurelia dialog plugin to work properly in my custom aurelia plugin. The idea is to use my custom aurelia plugin for common modals that I can re-use for different aurelia projects.

I have [setup a mininmal](https://github.com/dtaalbers/aurelia-plugin-with-dialog) plugin project that gives me errors when opening a modal. See the screenshot below for the errors that you can reproduce in the example project when clicking the button (note: the second console error is delayed a bit when clicking the button).

1. Clone the project.
2. Install dependencies with `npm i`.
3. Run the project with `npm start`.
4. Navigate to `http://localhost:9000` and click the button.

 ![Screenshot 2021-08-05 at 15.32.06](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/7/72c2d518a158bf88eddd67e856dc7762df06b54a.jpeg)

Also when I make changes to a typescript file that is located in the dev-app, and save the changes, I get a typescript error in my console which I don’t understand and don’t know how to solve.

 ![Screenshot 2021-08-05 at 15.32.29](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/d/de1e70bea50043119e420d573acb2869a90fb2a9.png)

Appreciate any help!

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [August 5, 2021, 8:25pm UTC](https://discourse.aurelia.io/t/aurelia-dialog-not-working-when-creating-a-custom-aurelia-plugin/4355/2 "2021-08-05T20:25:02Z")

</div>

Instead of passing the class try configuring the Viewmodel/View this way

```auto
viewModel: PLATFORM.moduleName("your-dialog"),
      view: PLATFORM.moduleName("your-dialog.html"),

```

---

<div class="post-metadata">

**Author:** ![dtaalbers](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dtaalbers/32/1412_2.png) [@dtaalbers](https://discourse.aurelia.io/u/dtaalbers)\
**Post date:** [August 6, 2021, 6:53am UTC](https://discourse.aurelia.io/t/aurelia-dialog-not-working-when-creating-a-custom-aurelia-plugin/4355/3 "2021-08-06T06:53:08Z")

</div>

Thank you for the reply, I appreciate it! I’ve tried your solution, but sadly I am getting a script error in that case 🤔. See attached images below:

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/2/2f0cb47bb96a6ce7ffe89e0cb4d95f9b27a901b1.png)

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/1/191b5e8d7d4d84f2ee2d76232d8d9dc485a7f8b7.png)

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [August 6, 2021, 12:21pm UTC](https://discourse.aurelia.io/t/aurelia-dialog-not-working-when-creating-a-custom-aurelia-plugin/4355/4 "2021-08-06T12:21:55Z")

</div>

Oh hold on you’re using requirejs. In this case forget my approach, that was meant for webpack. Hmm i’ve seen that your devapp and tool are from different folders which is why TS complains about no common rootdir.

@huochunpeng is this your au v1 Plugin setup that his project is using?

---

<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:** [August 6, 2021, 12:50pm UTC](https://discourse.aurelia.io/t/aurelia-dialog-not-working-when-creating-a-custom-aurelia-plugin/4355/5 "2021-08-06T12:50:16Z")

</div>

In fact, I am doing similar thing to wrap common dialogs in my private plugin.

You setup looks fine. I will have a play of your code tomorrow to see what went wrong.

---

<div class="post-metadata">

**Author:** ![dtaalbers](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dtaalbers/32/1412_2.png) [@dtaalbers](https://discourse.aurelia.io/u/dtaalbers)\
**Post date:** [August 6, 2021, 1:07pm UTC](https://discourse.aurelia.io/t/aurelia-dialog-not-working-when-creating-a-custom-aurelia-plugin/4355/6 "2021-08-06T13:07:59Z")

</div>

Yeah, the plugin `dev-app` doesn’t use webpack. My aurelia projects do though (the ones that I want use this plugin with) so indeed, I have to use `PLATFORM` for that. But first I wanted to make sure it works in the `dev-app` before trying it in my actual projects (using `npm link`).

I am having trouble using `npm link` though, when I want to test the plugin in the actual projects (the ones with webpack). I’ve tried [this](https://ilikekillnerds.com/2018/02/working-linked-node-modules-webpack-aurelia/) but couldn’t get it work properly and this is quite cumbersome to do every time I make a change. Do you guys have any experience with that @huochunpeng @zewa666?

> In fact, I am doing similar thing to wrap common dialogs in my private plugin.  
> You setup looks fine. I will have a play of your code tomorrow to see what went wrong.

Sounds good 👍 . Looking forward to see your solution for it!

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [August 6, 2021, 1:34pm UTC](https://discourse.aurelia.io/t/aurelia-dialog-not-working-when-creating-a-custom-aurelia-plugin/4355/7 "2021-08-06T13:34:03Z")

</div>

As for link, I always used to `npm install ../path/to/plugin/root` which would install it like a normal nom dependency.

---

<div class="post-metadata">

**Author:** ![dtaalbers](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dtaalbers/32/1412_2.png) [@dtaalbers](https://discourse.aurelia.io/u/dtaalbers)\
**Post date:** [August 6, 2021, 2:01pm UTC](https://discourse.aurelia.io/t/aurelia-dialog-not-working-when-creating-a-custom-aurelia-plugin/4355/8 "2021-08-06T14:01:46Z")

</div>

Oh nice. I’ll try that. Thanks!

---

<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:** [August 7, 2021, 12:48am UTC](https://discourse.aurelia.io/t/aurelia-dialog-not-working-when-creating-a-custom-aurelia-plugin/4355/9 "2021-08-07T00:48:21Z")

</div>

The MyDialog export seems confused Aurelia module loading. I guess because MyDialog looks like a VM (exported from src/index.ts), Aurelia somehow tries to load src/index.html.

Change

```auto
export {
  MyDialog,
  ModalService
};

```

To

```auto
export { ModalService };

```

solved the problem.

---

<div class="post-metadata">

**Author:** ![dtaalbers](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dtaalbers/32/1412_2.png) [@dtaalbers](https://discourse.aurelia.io/u/dtaalbers)\
**Post date:** [August 10, 2021, 11:59am UTC](https://discourse.aurelia.io/t/aurelia-dialog-not-working-when-creating-a-custom-aurelia-plugin/4355/10 "2021-08-10T11:59:03Z")

</div>

Yes, that worked for me too. Thanks for your effort!