Aurelia Webpack - module names mismatch

Help Requests
1

I am pretty new to aurelia so I apologise in advance for my stupidity. Feel free to chastise appropriately.

I understand that PLATFORM.moduleName() is necessary to map the correct webpack module name where referencing inside .ts files. However, I have a situation where at runtime aurelia cannot find the module referenced in the HTML template. It is looking for the wrong moduleID. However, I don’t think I am meant to use PLATFORM.moduleName() inside the template??? Or am I?

I have two src folders which webpack is targetting. A “common” folder with shared components and my app folder called “InformationRegister”. Webpack does bundle the module in the “common” folder with the ID=“elements/ux-panel/ux-panel”: I looked into the actual bundle file. However, when running the app I get the error in the browser console “[app-router] Error: Unable to find module with ID: components/…/…/common/elements/ux-panel/ux-panel”.

The ID is not the same as that in the webpacked js file hence failing. Why is it looking for a different module name than webpack has created? I have other resources being referenced in the common folder but only the ones referenced in the view templates fail.

My view HTML is:

image
image.png953×274 12.2 KB

1 Like
2

Turns out that aurelia-webpack-plugin does not like relative paths which wander out of the webpack “resolve.module” path. Unpredictable things happen.

I solved this by using a “resolve.alias” in webpack config and referencing all my reusable code via that path.

Painful experience - saved by a very useful find:

3

I wrote a guide related to this, I should probably update it to include how to do it with webpack (a plugin) https://github.com/aurelia-contrib/aurelia-getting-started/blob/master/guides/how-to-simplify-your-import-paths-in-typescript.md