HTML template path/alias problem

Help Requests
1

For some context, I’m transferring a project from the requirejs bundler to webpack.

The Problem: Each required template is throwing errors in console:

Error: Unable to find module with ID: elements/hud/hud.html

When I change the require path from
elements/hud/hud
to
resources/elements/hud/hud
it moves onto errors for the next required template and so on.

au build doesn’t throw errors or warnings. webpack.config.js has the “alias” set up for the resources sub-directories (otherwise it would error on the build):

'elements': path.resolve(__dirname, 'src/resources/elements/')

I don’t think it matters, but the aurelia.json also has the “path” set:

"elements": "resources/elements"

Hoping I’m just missing something obvious for getting the templates working because this is a legacy app with hundreds of templates and I don’t want to update every single path in a

In troubleshooting, I found that each custom element is being bundled without “resources” in the module id and then it’s subcomponent files (.js, .less, .html, etc) are being bundled with module ids that start with “resources”. Not sure what that would happen, but perhaps it’s a hint to someone with more framework knowledge than me.

2

When using webpack, you should look into this article: A Basic Example | Aurelia.

Basically, references to resources should be enclosed in PLATFORM.moduleName(…)

Regards.

3

The Basic Example is not helpful in this circumstance. I’ve already updated the main.js and routes in app.js to use PLATFORM.moduleName(…).

The issue is that the <require from=“…”> elements in my templates are no longer working. Templating: HTML Behaviors Introduction | Aurelia doesn’t say my from attribute should be formatted differently for webpack.

Here are the files I can share. Let me know if I missed something…

//main.js
import {PLATFORM} from 'aurelia-pal';
import environment from './environment';
import authconfig from './authcfg';

export function configure(aurelia) {
	aurelia.use
		.standardConfiguration()
		.feature(PLATFORM.moduleName('resources/index'));

	aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn')
	.plugin(PLATFORM.moduleName('aurelia-auth'), (baseConfig)=>{
		baseConfig.configure(authconfig);
	})
	.plugin(PLATFORM.moduleName('aurelia-dialog'), config => {
		config.useDefaults();
		config.settings.keyboard = true;
	})
	.globalResources(PLATFORM.moduleName('bindingBehaviors/asyncbindingbehavior'))
	.globalResources(PLATFORM.moduleName('valueConverters/currencyName'))
	.globalResources(PLATFORM.moduleName('valueConverters/currencyBalance'));

	return aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));

Can’t share the app.js so you’ll have to trust me that I’ve triple-checked the router’s moduleIds.

4

I’ve sure you’ve checked already, but it’s not a simple as a leading ./ in the path, is it?

.globalResources(PLATFORM.moduleName('./bindingBehaviors/asyncbindingbehavior'))

5

Correct, that doesn’t work. Webpack can’t resolve the modules if I do that.

I think the root issue might be in the Aurelia Webpack Plugin and how it handles non js files. It should take aliases (aka paths) into account so ‘resources’ is dropped from the module name, but for some reason it is only doing that for js files. I tried some tricks with @useView and @inlineView but it still makes the moduleId with resource at the start of the path.

Later today I’ll spin up a fresh, minimal project with the same folder structure to see if that fails as well

6

Just had a quick look at ours, and we have:

.feature(PLATFORM.moduleName('resources/index'))

and then in resources/index we have:

export function configure(config) {
  config.globalResources([PLATFORM.moduleName('./elements/loading-indicator')]);
}

That setup seems to be working for us with webpack.

7

Oh interesting, so each individual custom element is listed relative to resources/index. Hmm that won’t be fun haha. We have a couple hundred. I’ll give that a test though later today

8

I’ve started from a fresh project and am seeing the same errors. I start by creating a new element with the CLI which creates 2 files in resource directory. Then I require that file in the app.html. Webpack complains that it cannot resolve the required file, so I add an alias for the elements directory. Everything bundles and I get the same errors as before. Think I’m ready to submit this as a bug?

9

Anyone interested can find the issue I’ve created: Custom Element html not given correct moduleId · Issue #213 · aurelia/webpack-plugin · GitHub