(Solved) Error: Cannot determine default view strategy for object

Help Requests
1

I have code that opens a dynamically chosen dialog. This code runs on my test server when I build using the dev environment but fails when I build using prod. In prod, I get the following error:

Uncaught (in promise) Error: Cannot determine default view strategy for object.

My code looks something like this:

//These dialog VMs have an associated .html view of the same name
import {JurorListReportDialog} from './reports/juror-list-report-dialog'
import {GoodJurorReportDialog} from './reports/good-juror-report-dialog'

import {DialogService} from 'aurelia-dialog'

export class SessionReports{
   public reports : Report[] = [
      new Report("SessionJurorList", "Juror List", "...", JurorListReportDialog),
      new Report("GoodJurors", "Good Juror List", "...", GoodJurorReportDialog),
      ...
   ]

   static inject = [DialogService]
   constructor(private dialogService:DialogService){}

   //One of the above reports is being passed into this function
   public async printReport(report : Report){
      if(report.optionDialog){
          let result = await this.dialogService.open(
            { viewModel: report.optionDialog,
              model: {report: report, session: this.session}
            })
            .whenClosed(result => { return result; });
      }
      ...
   }
}

class Report {
   constructor(public name: string,
                             public title: string,
                             public description: string,
                             public optionDialog : any = null){}
}

I’m guessing this has something to do with minification but I have no idea how to correct this and get things working in production.

1 Like
2

Sounds like webpack.
But I am not exactly sure why it happened, normally aurelia-dialog is quite resilient.

You probably can try turn off mangle (which renames the dialog class name) on Terser https://webpack.js.org/configuration/optimization/#optimizationminimizer
https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions

1 Like
3

This is because during production build, your dialog view model, which is concatenated with other modules since you only referenced them directly, making it have no origin, and thus, no associated views.

You can fix this via inline view, or adding a PLATFORM.moduleName call to the consumer of the dialogs:

PLATFORM.moduleName('the dialog view model')
4 Likes
4

I’m not sure where you’re saying that would go.

import {JurorListReportDialog} from './reports/juror-list-report-dialog'
PLATFORM.moduleName('./reports/juror-list-report-dialog')

export class SessionReports{
   ...
}

Something like that?

3 Likes
5

Yes, PLATFORM.moduleName is necessary to prevent module concatenation, and gives some extra info to webpack

6

Thanks so much – that worked perfectly.

1 Like