# HTML template path/alias problem

**URL:** <https://discourse.aurelia.io/t/html-template-path-alias-problem/5009>\
**Category:** Help Requests\
**Created:** [December 9, 2022, 10:25pm UTC](https://discourse.aurelia.io/t/html-template-path-alias-problem/5009 "2022-12-09T22:25:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![TomorrowToday](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tomorrowtoday/32/2343_2.png) [@TomorrowToday](https://discourse.aurelia.io/u/TomorrowToday)\
**Post date:** [December 9, 2022, 10:25pm UTC](https://discourse.aurelia.io/t/html-template-path-alias-problem/5009/1 "2022-12-09T22:25:27Z")

</div>

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

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

```auto
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):

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

```

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

```auto
"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.

---

<div class="post-metadata">

**Author:** ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)\
**Post date:** [December 10, 2022, 9:32pm UTC](https://discourse.aurelia.io/t/html-template-path-alias-problem/5009/2 "2022-12-10T21:32:54Z")

</div>

When using webpack, you should look into this article: [A Basic Example | Aurelia](http://aurelia.io/docs/build-systems/webpack/a-basic-example#introduction).

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

Regards.

---

<div class="post-metadata">

**Author:** ![TomorrowToday](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tomorrowtoday/32/2343_2.png) [@TomorrowToday](https://discourse.aurelia.io/u/TomorrowToday)\
**Post date:** [December 11, 2022, 12:58am UTC](https://discourse.aurelia.io/t/html-template-path-alias-problem/5009/3 "2022-12-11T00:58:09Z")

</div>

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](http://aurelia.io/docs/templating/html-behaviors#making-an-html-behavior-available-in-a-view) 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…

```auto
//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.

---

<div class="post-metadata">

**Author:** ![dnkm](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dnkm/32/594_2.png) [@dnkm](https://discourse.aurelia.io/u/dnkm)\
**Post date:** [December 11, 2022, 10:11am UTC](https://discourse.aurelia.io/t/html-template-path-alias-problem/5009/4 "2022-12-11T10:11:21Z")

</div>

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'))`

---

<div class="post-metadata">

**Author:** ![TomorrowToday](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tomorrowtoday/32/2343_2.png) [@TomorrowToday](https://discourse.aurelia.io/u/TomorrowToday)\
**Post date:** [December 11, 2022, 5:55pm UTC](https://discourse.aurelia.io/t/html-template-path-alias-problem/5009/5 "2022-12-11T17:55:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dnkm](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dnkm/32/594_2.png) [@dnkm](https://discourse.aurelia.io/u/dnkm)\
**Post date:** [December 11, 2022, 6:17pm UTC](https://discourse.aurelia.io/t/html-template-path-alias-problem/5009/6 "2022-12-11T18:17:30Z")

</div>

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

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

and then in `resources/index` we have:

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

```

That setup seems to be working for us with webpack.

---

<div class="post-metadata">

**Author:** ![TomorrowToday](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tomorrowtoday/32/2343_2.png) [@TomorrowToday](https://discourse.aurelia.io/u/TomorrowToday)\
**Post date:** [December 11, 2022, 6:35pm UTC](https://discourse.aurelia.io/t/html-template-path-alias-problem/5009/7 "2022-12-11T18:35:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TomorrowToday](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tomorrowtoday/32/2343_2.png) [@TomorrowToday](https://discourse.aurelia.io/u/TomorrowToday)\
**Post date:** [December 12, 2022, 1:45am UTC](https://discourse.aurelia.io/t/html-template-path-alias-problem/5009/8 "2022-12-12T01:45:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![TomorrowToday](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tomorrowtoday/32/2343_2.png) [@TomorrowToday](https://discourse.aurelia.io/u/TomorrowToday)\
**Post date:** [December 12, 2022, 5:27am UTC](https://discourse.aurelia.io/t/html-template-path-alias-problem/5009/9 "2022-12-12T05:27:55Z")

</div>

Anyone interested can find the issue I’ve created: [Custom Element html not given correct moduleId · Issue #213 · aurelia/webpack-plugin · GitHub](https://github.com/aurelia/webpack-plugin/issues/213)
