Why are the views not created in Aurelia production build mode

Question

I trying to build my Aurelia application in production mode (devMode:production). The build is successful but when running it by opening the index.html I get the error "Cannot determine default view strategy for object."

The application works just fine when building it in dev mode and running it locally by just opening index.html or by executing "au run".

The application was generated by Aurelia-cli. I have tried to turn off every setting in webpack.config.js that is set for production mode without any luck.

In my main application view model I'm creating an array of view models that will be used in the view for creating subcomponents:

application.ts

...  
let newBayViewModel = new bay(sectionListLeftBay);
this._bayViewModels.push(newBayViewModel);

newBayViewModel = new bay(sectionListRightBay);
this._bayViewModels.push(newBayViewModel);
...

application.html

<div class="bay" repeat.for="bay of bayViewModels">
  <compose view-model.bind="bay"></compose>
</div>

And in the bay class I'm creating an array of section view models that will be bounded in the bay view:

bay.ts

export class bay {
  private _sectionViewModels: section[] = [];
  public get sectionViewModels() : section[] {
    return this._sectionViewModels;
  }

  constructor(
    private _sectionList: string[]) {

      this._sectionList.forEach(sectionName => {
        let newSectionViewModel = new section(sectionName);
        this._sectionViewModels.push(newSectionViewModel);
      });
    }
}

bay.html

<template>
  <div class="section-header" repeat.for="section of sectionViewModels">
      <compose view-model.bind="section"></compose>
  </div>
</template>

If I remove the code in bay.ts that is creating the section view models there will be no error so somehow the problem is related to that part. What can be the problem?

I'm using aurelia-cli 1.0.0-beta.15, webpack 4.31.0, aurelia-webpack-plugin 4.0.0

Answer 1

The issue you got is from different behavior between debug & production builds with Webpack. For debug build, which you use during development, all modules are kept the way they are, which means your html module is reachable, and thus, works without any issues. For production build, various optimization kicks in and one of them is module concatenating. Because of this, origin of modules (or the path to those modules) is no longer preserved so you get no origin for your view model, making it impossible to find your view as it uses view model origin to find view url.

What you can do is to decorate your view model with useView:

@useView(PLATFORM.moduleName('path/to/my-view'))
export class bay {

}

Now class bay, even with module concatenation, will still have information about where its view should be.