# Aurelia Webpack - module names mismatch

**URL:** <https://discourse.aurelia.io/t/aurelia-webpack-module-names-mismatch/1034>\
**Category:** Help Requests\
**Created:** [April 4, 2018, 1:45pm UTC](https://discourse.aurelia.io/t/aurelia-webpack-module-names-mismatch/1034 "2018-04-04T13:45:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jcaddy](https://avatars.discourse-cdn.com/v4/letter/j/a9a28c/32.png) [@jcaddy](https://discourse.aurelia.io/u/jcaddy)\
**Post date:** [April 4, 2018, 1:45pm UTC](https://discourse.aurelia.io/t/aurelia-webpack-module-names-mismatch/1034/1 "2018-04-04T13:45:07Z")

</div>

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](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/9180c61023e0e4321ddb6e33ae562a2d586f6519.png)

---

<div class="post-metadata">

**Author:** ![jcaddy](https://avatars.discourse-cdn.com/v4/letter/j/a9a28c/32.png) [@jcaddy](https://discourse.aurelia.io/u/jcaddy)\
**Post date:** [April 5, 2018, 7:07pm UTC](https://discourse.aurelia.io/t/aurelia-webpack-module-names-mismatch/1034/2 "2018-04-05T19:07:05Z")

</div>

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:

> **[Type-safe es2015 module import path aliasing with Webpack, Typescript and Jest](https://medium.com/@martin_hotell/type-safe-es2015-module-import-path-aliasing-with-webpack-typescript-and-jest-fe461347e010)**
>
> How to remove long import paths and encapsulate packages in reusable modules folder and make everything work with webpack, jest and typescript

---

<div class="post-metadata">

**Author:** ![mttmccb](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mttmccb/32/38_2.png) [@mttmccb](https://discourse.aurelia.io/u/mttmccb)\
**Post date:** [April 5, 2018, 7:24pm UTC](https://discourse.aurelia.io/t/aurelia-webpack-module-names-mismatch/1034/3 "2018-04-05T19:24:49Z")

</div>

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](https://github.com/aurelia-contrib/aurelia-getting-started/blob/master/guides/how-to-simplify-your-import-paths-in-typescript.md)