# \[Solved\] Aurelia Dialog not working when build in production

**URL:** <https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471>\
**Category:** Help Requests\
**Created:** [July 28, 2018, 4:11am UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471 "2018-07-28T04:11:14Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![clmorales](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@clmorales](https://discourse.aurelia.io/u/clmorales)\
**Post date:** [July 28, 2018, 4:11am UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/1 "2018-07-28T04:11:14Z")

</div>

I have a problem with Aurelia Dialog when building in production. I am using WebPack and TypeScript. When I build in developer mode it works fine. Is anyone having this issue?

---

<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 28, 2018, 4:11pm UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/2 "2018-07-28T16:11:56Z")

</div>

I just tried a production and development webpack build and both builds worked fine. It would help to know more about the error.

---

<div class="post-metadata">

**Author:** ![clmorales](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@clmorales](https://discourse.aurelia.io/u/clmorales)\
**Post date:** [July 28, 2018, 4:45pm UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/3 "2018-07-28T16:45:56Z")

</div>

Thank you for your time.

This is the error when building: au build --env prod. It is something when minify or uglify files for production. I have not problem when building: au build --env dev.

Unhandled rejection Error: Can not resolve “moduleId” of “t”.  
at e.ensureViewModel ([http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:306249](http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:306249))  
at e.open ([http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:307634](http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:307634))  
at t.openMyDialog ([http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:353424](http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:353424))  
at e.evaluate ([http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:223617](http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:223617))  
at t.callSource ([http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:289885](http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:289885))  
at t.handleEvent ([http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:290046](http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:290046))  
at HTMLDocument.On ([http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:246044](http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:246044))

I have a simple app like in Aurelia Docs. Aurelia: Basics

file: app.ts

import { inject } from ‘aurelia-framework’;  
import { DialogService } from ‘aurelia-dialog’;  
import { MyDialog } from ‘./myDialog’;

@inject(DialogService)  
export class App {  
message = ‘Hello World!’;  
dialogService: DialogService;

constructor(dialogService: DialogService) {  
this.dialogService = dialogService;  
}

person = { firstName: ‘Wade’, middleName: ‘Owen’, lastName: ‘Watts’ };  
openMyDialog() {  
this.dialogService.open({ viewModel: MyDialog, model: this.person, lock: false }).whenClosed(response =\> {  
if (!response.wasCancelled) {  
console.log(‘good’);  
this.person = response.output;  
} else {  
console.log(‘bad’);  
}  
console.log(response.output);  
});  
}  
}

file: myDialog.ts

import { DialogController } from ‘aurelia-dialog’;

export class MyDialog{  
static inject = [DialogController];  
controller: DialogController;  
person = { firstName: ‘’ };  
constructor(controller){  
this.controller=controller;  
this.controller.settings.lock = true;  
}  
attached(param){  
this.person=param;  
}  
}

Thanks again for your time.

Carlos

---

<div class="post-metadata">

**Author:** ![jsobell](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jsobell/32/87_2.png) [@jsobell](https://discourse.aurelia.io/u/jsobell)\
**Post date:** [July 30, 2018, 12:16am UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/5 "2018-07-30T00:16:59Z")

</div>

It’s because WebPack doesn’t know your MyDialog module exists. I have no idea how it ever works, even in dev mode, but the fix is to use the `PLATFORM.moduleName` feature.

So change  
`this.dialogService.open({ viewModel: MyDialog, model: this.person, lock: false })`  
to  
`this.dialogService.open({ viewModel: PLATFORM.moduleName('MyDialog'), model: this.person, lock: false })`  
Explanation is here: [https://github.com/aurelia/webpack-plugin/wiki/Managing-dependencies](https://github.com/aurelia/webpack-plugin/wiki/Managing-dependencies)

I understand there’s a new release of the Dialog pending release that will enable WebPack to detect the dependency.

---

<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 30, 2018, 12:21am UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/6 "2018-07-30T00:21:17Z")

</div>

> [@jsobell](#):
>
> { viewModel: MyDialog

I am bit confused about your answer. I didn’t see anything wrong to directly reference a class for webpack to pick it up?

Update: just read dialog doc. It confused me even more. I didn’t use webpack anyway, you can ignore me 🙂

---

<div class="post-metadata">

**Author:** ![clmorales](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@clmorales](https://discourse.aurelia.io/u/clmorales)\
**Post date:** [July 30, 2018, 1:21am UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/7 "2018-07-30T01:21:28Z")

</div>

[SOLVED]. Thanks a lot. It is working great now. I had no idea because that detail was not clear on docs. I really appreciate you all for your time.

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [January 17, 2019, 5:06pm UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/8 "2019-01-17T17:06:49Z")

</div>

Glad I found this.  
Should be noted that this still is an issue it appears. Solved my production only issue.

---

<div class="post-metadata">

**Author:** ![Tim-Erwin](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tim-erwin/32/1133_2.png) [@Tim-Erwin](https://discourse.aurelia.io/u/Tim-Erwin)\
**Post date:** [March 15, 2019, 7:35am UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/9 "2019-03-15T07:35:04Z")

</div>

Not sure if it’s ok to use this thread for my problem, but since I’d give it the exact same title, it seems like the best place to put my problem.

I have a very simple dialog like so:

```
@useView(PLATFORM.moduleName('path/to/my-dialog.html'))
@autoinject
export class MyDialog {
    constructor (readonly controller: DialogController) { }
}

```

It gets used like this:

```
this.dialogService.open({viewModel: MyDialog});

```

So I’m referencing the class directly, I believe that’s possible, well, in general it works… I’m using webpack. It works fine in dev mode, however, in the prod (minified) version, I get

```
Can not resolve "moduleId" of "e".

```

From what I read here and [here](https://github.com/aurelia/dialog/issues/127) I cannot figure out what to do. Any advice what I’m doing wrong here?

---

<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:** [March 15, 2019, 8:26am UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/10 "2019-03-15T08:26:09Z")

</div>

Your issue comes from a typo: `this.dialogService.open({MyDialog});` -\> `this.dialogService.open({ viewModel: MyDialog});`

---

<div class="post-metadata">

**Author:** ![Tim-Erwin](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tim-erwin/32/1133_2.png) [@Tim-Erwin](https://discourse.aurelia.io/u/Tim-Erwin)\
**Post date:** [March 15, 2019, 1:09pm UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/11 "2019-03-15T13:09:05Z")

</div>

Oops, sorry, that happended when copying the code from my project. Fixed the example.

---

<div class="post-metadata">

**Author:** ![Tim-Erwin](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tim-erwin/32/1133_2.png) [@Tim-Erwin](https://discourse.aurelia.io/u/Tim-Erwin)\
**Post date:** [March 19, 2019, 9:26am UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/12 "2019-03-19T09:26:54Z")

</div>

Maybe I just confused everybody. My problem still exists. Does anybody have a hint for me?

---

<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:** [March 19, 2019, 9:49am UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/13 "2019-03-19T09:49:08Z")

</div>

I’ll try to reproduce it and get back to you. I think it should work, but let’s see.

---

<div class="post-metadata">

**Author:** ![Tim-Erwin](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tim-erwin/32/1133_2.png) [@Tim-Erwin](https://discourse.aurelia.io/u/Tim-Erwin)\
**Post date:** [March 19, 2019, 10:09am UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/14 "2019-03-19T10:09:29Z")

</div>

Thank you so much. I’m just trying to create an MCVE, will send to you asap

---

<div class="post-metadata">

**Author:** ![Tim-Erwin](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tim-erwin/32/1133_2.png) [@Tim-Erwin](https://discourse.aurelia.io/u/Tim-Erwin)\
**Post date:** [March 19, 2019, 10:26am UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/15 "2019-03-19T10:26:53Z")

</div>

Hi, here is a complete project (without node\_modules, with an already built prod version in dist): [https://www.dropbox.com/s/14hxp754769x13p/diapack.zip?dl=0](https://www.dropbox.com/s/14hxp754769x13p/diapack.zip?dl=0)

---

<div class="post-metadata">

**Author:** ![jsobell](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jsobell/32/87_2.png) [@jsobell](https://discourse.aurelia.io/u/jsobell)\
**Post date:** [March 20, 2019, 1:30am UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/16 "2019-03-20T01:30:53Z")

</div>

Is there a reason you’re using an old `aurelia-dialog` version? If you update to v2 you won’t have this issue.

---

<div class="post-metadata">

**Author:** ![Tim-Erwin](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tim-erwin/32/1133_2.png) [@Tim-Erwin](https://discourse.aurelia.io/u/Tim-Erwin)\
**Post date:** [March 20, 2019, 9:30am UTC](https://discourse.aurelia.io/t/solved-aurelia-dialog-not-working-when-build-in-production/1471/17 "2019-03-20T09:30:33Z")

</div>

Oh, well, I did `npm update` which didn’t help. Moving to the next major version worked. Thanks for the hint. It kinda broke the webpack bundling, but well, that’s a different thing 🙂