Aurelia won't load template without <require> while using webpack

Question

I'm loading template dynamically in aurelia and while using webpack a view won't load unless added as <require from="..."></require>. When using aurelia-cli this was not necessary. Why? Does this have anything to do with how webpack loads modules?

I'm using aurelia with asp.net core template in Visual Studio 2017 generate by dotnet new aurelia as per https://github.com/EisenbergEffect/aspnetcore-aurelia-build-2017

<!-- this part was not required when using cli -->
<require from="../empty-report/empty-report"></require>

<compose id="printcontent" view-model="../${report.type}-report/${report.type}-report" model.bind="report"></compose>

my webpack.config.js

const path = require('path');
const webpack = require('webpack');
const { AureliaPlugin } = require('aurelia-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    return [{
        stats: { modules: false },
        entry: { 'app': 'aurelia-bootstrapper' },
        resolve: {
            extensions: ['.ts', '.js'],
            modules: ['ClientApp', 'node_modules'],
        },
        output: {
            path: path.resolve(bundleOutputDir),
            publicPath: '/dist/',
            filename: '[name].js'
        },
        module: {
            rules: [
                { test: /\.ts$/i, include: /ClientApp/, use: 'ts-loader?silent=true' },
                { test: /\.html$/i, use: 'html-loader' },
                { test: /\.css$/i, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            }),
            new AureliaPlugin({ aureliaApp: 'boot' })
        ].concat(isDevBuild ? [
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')  // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    }];
}

UPDATE #1

When edited bootstrapper to allow for resources, webpack builds, but loading the site I'll get an error

boot.ts

import 'isomorphic-fetch';
import { Aurelia, PLATFORM } from 'aurelia-framework';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build

export function configure(aurelia: Aurelia) {
    aurelia.use
        .standardConfiguration()
        .feature(PLATFORM.moduleName('resources'));// /index makes no difference

    //aurelia.use.plugin('aurelia-table');
    //aurelia.use.plugin('aurelia-chart');

    if (IS_DEV_BUILD) {
        aurelia.use.developmentLogging();
    }

    aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app/components/app/app')));
}

error:

aurelia-loader-webpack.js:187 Uncaught (in promise) Error: Unable to find module with ID: resources/index
    at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:187)
    at step (aurelia-loader-webpack.js:36)
    at Object.next (aurelia-loader-webpack.js:17)
    at aurelia-loader-webpack.js:11
    at Promise (<anonymous>)
    at 146.__awaiter (aurelia-loader-webpack.js:7)
    at WebpackLoader.146.WebpackLoader._import (aurelia-loader-webpack.js:152)
    at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:252)
    at step (aurelia-loader-webpack.js:36)
    at Object.next (aurelia-loader-webpack.js:17)

UPDATE #2:

I can confirm that the issue was the missing .feature('resources') or .feature(PLATFORM.moduleName('resources')), but even when adding index.ts (as advised here: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/6) I am not able to load features this way

I have organised my app as per above instructions on Aurelia page, but I still get the same error Error: Unable to find module with ID: resources/index. I have placed all my elements/components in resources folder and added index.ts in the same folder.

as far as I know all components not assigned as global resources (e.g. with .globalResources('./empty-report/empty-report');) will need to use a require to bring them into context; this was intentionally designed in order to avoid name clashing and improve clarity e.g. compared to other frameworks like angularjs — Ovidiu Dolha
that make sense, but why did it work while using cli? in CLI bootstrapper I've had aurelia.use.feature('resources') Is this why it worked? — vidriduch
bingo, yes aurelia.use.feature('...') is just like declaring all components inside as global resources - see this — Ovidiu Dolha
that is slightly clearer not, but still with a bit of error. I have updated the issue. — vidriduch
that's because the .feature approach expects to have an index inside the folder you're registering - aurelia-cli approach was probably doing this for you - now you must manually add this index in resources - a file that collects all your resources like this export function configure(aurelia) { aurelia.globalResources('./empty-report/empty-report') — Ovidiu Dolha

Leonidas A Leonidas A · Accepted Answer · 2017-05-22T19:30:13

Are you using the new aurelia webpack plugin/setup? If yes then you should load features like this aurelia.use.feature(PLATFORM.moduleName('my-feature/index');

Same goes for moduleId fields on routes.

More info here https://github.com/jods4/aurelia-webpack-build/wiki/Debugging-missing-modules

Aurelia won't load template without <require> while using webpack

1 Answers