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

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.

1 Like

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

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 !

1 Like

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

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

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

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 },
});

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.

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

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.

1 Like

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?

1 Like

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

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.

1 Like

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.

1 Like

Hi @bigopon !
daily update :wink:

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.

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.

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

thank you so much !

1 Like

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 ?

1 Like

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.

1 Like

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).

1 Like

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.

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.

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")
         }
      ]);
   }
}
<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>