# Aurelia-logging-console.js:45 ERROR \[app-router\] Error: Unable to find module with ID: shared-components/container/genius-desktop-base-container.html

**URL:** <https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634>\
**Category:** Help Requests\
**Created:** [July 9, 2020, 8:23pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634 "2020-07-09T20:23:53Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![legrandmawak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/legrandmawak/32/1867_2.png) [@legrandmawak](https://discourse.aurelia.io/u/legrandmawak)\
**Post date:** [July 9, 2020, 8:23pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/1 "2020-07-09T20:23:53Z")

</div>

Hello everyone,

im looking for an insight on my current difficulties with the upgrade toward Webpack 4.  
we were using webpack for our apps for several months but we decided it was time to embrace the new version of WP4 because our version and other dependancies were old (“webpack”: “3.5.5”)  
and as well update the Aurelia Stack in the mean time.

so here’s the new stack of dependencies I’m currently trying  
{  
“name”: “genius-spa-quote-desktop”,  
“description”: “An Aurelia client application.”,  
“version”: “0.1.0”,  
“repository”: {  
“type”: “???”,  
“url”: “???”  
},  
“license”: “MIT”,  
“dependencies”: {  
“aurelia-animator-css”: “^1.0.4”,  
“aurelia-bootstrapper”: “^2.3.3”,  
“aurelia-framework”: “^1.3.1”,  
“aurelia-store”: “1.6.0”,  
“genius-common”: “file:…/genius-common”,  
“genius-dal”: “file:…/genius-dal”,  
“genius-services”: “file:…/genius-services”,  
“i18next”: “^10.2.2”,  
“prettier”: “^2.0.5”,  
“sass-loader”: “^7.1.0”,  
“tailwindcss”: “^1.0.5”  
},  
“devDependencies”: {  
“@types/lodash”: “^4.14.149”,  
“@types/node”: “^13.7.6”,  
“@types/webpack”: “^4.41.6”,  
“app-settings-loader”: “^1.0.3”,  
“aurelia-cli”: “^1.3.1”,  
“aurelia-loader-nodejs”: “^1.1.0”,  
“aurelia-pal-nodejs”: “^2.0.0”,  
“aurelia-testing”: “^1.0.0”,  
“aurelia-webpack-plugin”: “^4.0.0”,  
“clean-webpack-plugin”: “^3.0.0”,  
“copy-webpack-plugin”: “^5.1.1”,  
“css-loader”: “^3.4.2”,  
“duplicate-package-checker-webpack-plugin”: “^3.0.0”,  
“expose-loader”: “^0.7.5”,  
“file-loader”: “^5.1.0”,  
“gulp”: “^4.0.0”,  
“html-loader”: “^0.5.5”,  
“html-webpack-plugin”: “^3.2.0”,  
“istanbul-instrumenter-loader”: “^3.0.1”,  
“mini-css-extract-plugin”: “^0.9.0”,  
“minimatch”: “^3.0.4”,  
“promise-polyfill”: “^8.1.3”,  
“style-loader”: “^1.1.3”,  
“through2”: “^3.0.1”,  
“tree-kill”: “^1.2.1”,  
“ts-jest”: “^25.2.1”,  
“ts-loader”: “^6.2.1”,  
“ts-node”: “^8.6.2”,  
“typescript”: “^3.8.2”,  
“url-loader”: “^3.0.0”,  
“vinyl-fs”: “^3.0.3”,  
“webpack”: “^4.41.6”,  
“webpack-bundle-analyzer”: “^3.6.0”,  
“webpack-cli”: “^3.3.11”,  
“webpack-dev-server”: “^3.10.3”  
},  
“scripts”: {  
“build”: “webpack --env.production --extractCss”,  
“start”: “webpack-dev-server --extractCss”,  
“build:dev”: “webpack --extractCss”,  
“analyze”: “webpack --env.production --analyze”,  
“test”: “au test”  
},  
“engines”: {  
“node”: “\>=8.9.0”  
}  
}

I basically launched a new app using the aureli-cli : au new  
and I added the dependencies I required to work with.

does someone can tell me how I can debug this issue ? im really stuck here.

---

<div class="post-metadata">

**Author:** ![legrandmawak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/legrandmawak/32/1867_2.png) [@legrandmawak](https://discourse.aurelia.io/u/legrandmawak)\
**Post date:** [July 10, 2020, 3:29pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/2 "2020-07-10T15:29:32Z")

</div>

[Update]  
So i followed the guide provided here to use the most basic setup,

> **[A Basic Example | Aurelia](https://aurelia.io/docs/build-systems/webpack/a-basic-example/)**
>
> If you're interested in setting up Webpack from scratch to build projects, this article will give you everything you need to know.

with few tweaks on the package.json  
{  
“name”: “genius-spa-quote-desktop”,  
“description”: “An Aurelia client application.”,  
“version”: “13.0.0”,  
“repository”: {  
“type”: “???”,  
“url”: “???”  
},  
“license”: “MIT”,  
“scripts”: {  
“build”: “webpack --env=production”,  
“dev”: “webpack-dev-server”  
},  
“dependencies”: {  
“@syncfusion/ej2”: “17.4.49”,  
“aurelia-bootstrapper”: “^2.3.3”,  
“aurelia-framework”: “^1.3.1”,  
“genius-common”: “file:…/genius-common”,  
“genius-dal”: “file:…/genius-dal”,  
“genius-services”: “file:…/genius-services”,  
“aurelia-i18n”: “3.1.1”,  
“rxjs”: “6.3.2”  
},  
“devDependencies”: {  
“@types/node”: “^10.12.2”,  
“aurelia-webpack-plugin”: “4.0.0”,  
“html-loader”: “^0.5.5”,  
“html-webpack-plugin”: “^3.2.0”,  
“ts-loader”: “^5.3.0”,  
“typescript”: “3.8.3”,  
“webpack-cli”: “^3.1.2”,  
“webpack-dev-server”: “^3.1.10”,  
“webpack”: “4.43.0”  
}  
}

but I’m back on the old error I was given, (before) I used cli au new command (see the first post).

Uncaught (in promise) Error: Unable to find module with ID: shared-components/notification/genius-messages.html

this module is located in our SRC folder. but since its a symlink,

> mklink /J “packages/%%l/src/shared-components” “packages/genius-ui-components/src/components”

I think the module isn’t successufully include in our webpack bundle.

is there something I’m missing ?

im feeling that our webpack.config.js file could help you help me. so here it goes… I simply use the basic template (link at the beggining of the post) but I add the nodemodule root path since I use lerna to hoist our node\_modules to our root. Several repetition of the same package in various SPA…

```
const { AureliaPlugin } = require("aurelia-webpack-plugin");

```

const HtmlWebpackPlugin = require(“html-webpack-plugin”);  
const { resolve } = require(“path”);  
const project = require(“./aurelia\_project/aurelia.json”);  
const outDir = resolve(\_\_dirname, project.platform.output);

const srcDir = resolve(\_\_dirname, “src”);  
module.exports = function (mode) {  
return {  
mode: mode || “development”,  
resolve: {  
extensions: [“.ts”, “.js”],

```
        modules: [srcDir, "node_modules"],
    },
    entry: {
        app: ["aurelia-bootstrapper"],
    },
    output: {
        filename: "[name].js",
        path: resolve(__dirname, "dist"),
    },
    watch: mode === "development",
    devtool: mode === "development" ? "inline-source-map" : "source-map",
    devServer: {
        contentBase: outDir,

        historyApiFallback: true,
        hot: project.platform.hmr,
        port: project.platform.port,
    },
    module: {
        rules: [
            { test: /\.html$/i, loader: "html-loader" },
            { test: /\.ts$/i, loader: "ts-loader" },
        ],
    },
    plugins: [
        // the AureliaPlugin translates Aurelia's conventions to something Webpack understands
        // and must be included in order for Webpack to work
        new AureliaPlugin(),
        new HtmlWebpackPlugin({
            template: "index.ejs",
            metadata: { dev: mode !== "production" },
        }),
    ],
};

```

};

thank you !

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [July 10, 2020, 9:07pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/3 "2020-07-10T21:07:15Z")

</div>

Can you try remove lock file and node modules and try again? Your config looks all normal

---

<div class="post-metadata">

**Author:** ![legrandmawak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/legrandmawak/32/1867_2.png) [@legrandmawak](https://discourse.aurelia.io/u/legrandmawak)\
**Post date:** [July 13, 2020, 6:55pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/4 "2020-07-13T18:55:07Z")

</div>

thanks @bigopon for you reply.  
I’ve udpate my stack removing the lock files, but the problem remains.

im having different issue now. its the same as I found here

> [@Problem with unit testing and mocking API call](https://discourse.aurelia.io/t/problem-with-unit-testing-and-mocking-api-call/2405):
>
> I’m trying to create a unit test case using Karma and Jasmine. I’m using jasmine-ajax to stub out the API request with a fake response. But the problem I have is that the unit test throws an error saying “TypeError: aurelia\_pal\_\_WEBPACK\_IMPORTED\_MODULE\_1\_\_.DOM.createCustomEvent is not a function”. The unit test: import { SystemInfo } from './../../src/common/models/system-info'; import { InfoPresentation } from "applications/info\_presentation/info-presentation"; describe('Info presentation:',…

however im not running the tests, im calling a rest API method

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/5/57ed809ef29bd8d89f0b5a4a57e8192bb6a87b37.png)

that basically calls the fetch method from the aurelia-fetch-client  
const response = await this.httpClient.fetch(completeUri, {  
method: httpMethod,  
body: body ? json(body) : null,  
headers: { isScreenFreezing: isScreenFreezing },  
});

---

<div class="post-metadata">

**Author:** ![legrandmawak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/legrandmawak/32/1867_2.png) [@legrandmawak](https://discourse.aurelia.io/u/legrandmawak)\
**Post date:** [July 13, 2020, 7:38pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/5 "2020-07-13T19:38:29Z")

</div>

I’ve updated the package dependencies (other project) where the Rest Calls were made  
“aurelia-fetch-client”: “^1.3.1”, =\> “1.8.2”

however im back with the Module ID not found.  
aurelia-logging-console.js:45 ERROR [app-router] Error: Unable to find module with ID: shared-components/container/genius-desktop-base-container.html

the shared-components folder is our UI librairy, added via symlink in our SRC folder in the current project.

---

<div class="post-metadata">

**Author:** ![legrandmawak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/legrandmawak/32/1867_2.png) [@legrandmawak](https://discourse.aurelia.io/u/legrandmawak)\
**Post date:** [July 13, 2020, 9:27pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/6 "2020-07-13T21:27:16Z")

</div>

Im full time debugging this issue and this is where I hit the a hard stop. Im debugging to see where the module id is required and searched in the webpack’s noodle salad… im here im at (webpack:///webpack/bootstrap) :  
 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/2/2519ba9dc30c3e12c2af371c0d7089caa117bdc9.png)

the installedModules doesn’t containt array doesn’t contains the whole shared-components folder… that’s a problem of course. But as I’m saying since the start this folder is symlinked… is it handled ? is it a webpack issue ? I feel on the aurelia-side i’ve done all I can do…

the line that import my file is done in a ts file,

import { GeniusDesktopBaseContainer } from “shared-components/container/genius-desktop-base-container”;

[Reminder] shared-components is a symlink there is no file officially there.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [July 13, 2020, 10:37pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/7 "2020-07-13T22:37:03Z")

</div>

I think it could also be a combination issue of symlink, webpack and Aurelia plugin. Let’s try to ping @jods4 to see if he is aware of any issues. For your case, if the view cannot be automatically retrieved, can you try add `@useView(...)` on your view model? Let’s hold its hand a bit more?

---

<div class="post-metadata">

**Author:** ![legrandmawak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/legrandmawak/32/1867_2.png) [@legrandmawak](https://discourse.aurelia.io/u/legrandmawak)\
**Post date:** [July 13, 2020, 10:49pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/8 "2020-07-13T22:49:45Z")

</div>

thanks you again for your quick reply.  
I like you idea to force the view in place. but the view is found. its in required components that are something missing. See my landing page on the router calls this view, container/quote-summary-container and here’s how the file starts

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/2/2f111759930a612f4ef3a79f9f28f7be65167c42.png)

you see its the required file in the aurelia template that’s missing. the view itself is found its all those dependencies that are from a symlinked folder that aren’t loaded/packaged by our friend webpack.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [July 13, 2020, 11:57pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/9 "2020-07-13T23:57:57Z")

</div>

If the plugin is unable to instruct webpack to find/bundle the right modules, maybe we can do it ourselves. You can try adding `PLATFORM.moduleName(...)` in view model (just some floating statements at top of your vm file suffice), or via `ModuleDependenciesPlugin` (another export of our Aurelia Webpack plugin) in your webpack config.

---

<div class="post-metadata">

**Author:** ![legrandmawak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/legrandmawak/32/1867_2.png) [@legrandmawak](https://discourse.aurelia.io/u/legrandmawak)\
**Post date:** [July 14, 2020, 1:40pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/10 "2020-07-14T13:40:03Z")

</div>

Hi @bigopon !  
daily update 😉

i’ve tried to add Platform.moduleName() for each UI components of my landing page. but with no luck.  
However I noticed that the aurelia templating does its job.

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/e/ea6ee538852e8f22e6c66d4c37f970d6d477430d.png)

The required stuff is declared and searched for. All I need is to find a way to package it, and load the module before it was asked by webpack. I searched the chunk files and the shared-components content is packaged.

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/b/bf43d73c7ddfee88f906a874cf751faf3d259dad.png)

How can I give it a greater priority in the loading sequence ?  
any ideas ?

thank you so much !

---

<div class="post-metadata">

**Author:** ![legrandmawak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/legrandmawak/32/1867_2.png) [@legrandmawak](https://discourse.aurelia.io/u/legrandmawak)\
**Post date:** [July 14, 2020, 2:08pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/11 "2020-07-14T14:08:19Z")

</div>

Oh my …  
I’m such a silly goose. The required (module id) file isn’t the TS one it is the **HTML** file that cannot be found. And this one isn’t part of the bundle (webpack compiled files).

how can I forced the **HTML** alongside the TS ?  
by adding @useView() for each TS. as @bigopon sugggested earlier ?

---

<div class="post-metadata">

**Author:** ![legrandmawak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/legrandmawak/32/1867_2.png) [@legrandmawak](https://discourse.aurelia.io/u/legrandmawak)\
**Post date:** [July 15, 2020, 1:55pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/12 "2020-07-15T13:55:35Z")

</div>

I think I found solid ground. Earlier I was using the @useView() in my TS file for my UI component that refuse to load. But I was giving it a relative path (this-is-the-file.html).

However the UI librairy was as I said symlinked under a specific name into the SRC folder. “Shared-Components”.

when I used the full path starting with the name of the symlink, everything starts to work again !!!

`@useView("shared-components/container/genius-desktop-base-container.html")`

thanks a thousand times @bigopon !  
you gave me the answer straight up only I wasn’t using the right path with it.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [July 16, 2020, 11:42pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/13 "2020-07-16T23:42:21Z")

</div>

I think its a bit uncomfortable for you, and probably anyone to have to go through such. Theres maybe some limitation that the plugin has in the integration with Webpack that it cannot easily handle symlinks, folders outside root, etc…, and requires special treatment as if they are in node\_modules(or a plugin). Would be nice(awesome) if you help turn this into a small article, in our series of [Better know a framework #xxx] (you can find existing ones by searching on discourse).

---

<div class="post-metadata">

**Author:** ![legrandmawak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/legrandmawak/32/1867_2.png) [@legrandmawak](https://discourse.aurelia.io/u/legrandmawak)\
**Post date:** [July 17, 2020, 1:37am UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/14 "2020-07-17T01:37:44Z")

</div>

Hi again !

listen im no expert but if I can help to figure a documentation that can prevent people to avoid being stuck in a dead loop for 6 to 12 days as I was. I call it limbo.

I would be happy to help.

---

<div class="post-metadata">

**Author:** ![Marcel-B](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/marcel-b/32/2146_2.png) [@Marcel-B](https://discourse.aurelia.io/u/Marcel-B)\
**Post date:** [July 25, 2022, 4:34pm UTC](https://discourse.aurelia.io/t/aurelia-logging-console-js-45-error-app-router-error-unable-to-find-module-with-id-shared-components-container-genius-desktop-base-container-html/3634/15 "2022-07-25T16:34:54Z")

</div>

I have about the same problem right now. With @useView and the reference to the html, the template is found and displayed, but if the template contains a router-view, the configureRouter method is not called and no routing can be implemented.

```auto
import { PLATFORM } from 'aurelia-pal';
import { RouterConfiguration, Router } from 'aurelia-router';
import { useView, customElement, autoinject } from 'aurelia-framework';

@autoinject
@customElement('hello')
@useView(PLATFORM.moduleName("controls/hello.html"))
export class Hello {
   heyYa = "Hello from Hello Control";

   constructor(private router: Router) {
      console.log("__CTR");
   }

   attached() {
      console.log("__Attached");
   }

   bind() {
      console.log("__Bind");
   }

   configureRouter(config: RouterConfiguration, router: Router): void {
      this.router = router;
      config.options.pushState = true;
      console.log("__Unfortunately I am not called :-(");
      config.title = 'Title';
      config.map([
         {
            route: [""],
            title: "Hello Router",
            name: 'name',
            moduleId: PLATFORM.moduleName("controls/inner")
         }
      ]);
   }
}

```

```auto
<template>
   <div style="background-color: azure; border: 2px solid black; border-radius: 25px; padding: 2rem">
      <h1>Test Shared Control (Turborepo yarn workspace)</h1>
      ${heyYa}
      <ul repeat.for="nav of router.navigation">
         <li><a href.bind="nav.href">${nav.title} - Test</a></li>
      </ul>
      <router-view></router-view>
   </div>
</template>

```