"Unable to find module with ID" when using aurelia &webpack

Help Requests
1

Hi,
I have problems with Aurelia and Webpack in combination.

my scr folder has the following structure:

-src
----app
--------list.html
--------list.ts
--------list-model.ts

The “list-model” is used in the list:

import { ListModel } from “./list-model”;
var model = new ListModel();
model.doSomething();

My WebPack-Entry-Points are"list.html" and “list.ts”.

When I start the application, I get the error “Unable to find module with ID: app/list”. As soon as I write the following about the import-part it works:
PLATFORM.moduleName("app/list-model");

But, with simple imports of TS files, shouldn’t it be possible for Webpack to resolve the relationship itself?

Thank you for any help.

1 Like
2

The requirement of PLATFORM.moduleName in Webpack is a common pain point.
That’s why I switched to the new built-in loader from the CLI when it was introduced.
It’s basically revamped require.js and “just works”.

1 Like
3

Thanks for your answer.
But shouldn’t the PLATFORM.moduleName be unnecessary in my case?

1 Like
4

Can you show the code of your three files?

1 Like
5 
list.ts:

import { ListModel } from "./list-model";
export class List{

model: ListModel;

init() {
    this.model = new ListModel();
    this.model.doSomething();
}

}

list-model.ts:
public doSomething() {
    	console.log("test");
}

The html page does not contain something special. The entry points in the webpack.config are “list.ts” and “list.html”. The ts-file is not found.

1 Like
6

Your webpack error mentioned missing “app/list”, but your code fix is for “app/list-model”. I am still confused what you mean.

Could you share the whole app (including all setup and config) in a github repo?

1 Like
7

Hi,

right, that’s the problem. As soon as I add the PLATFORM.moduleName for list-model, app/list is found.

This confuses me a bit, because all referenced TS files (via import) are resolved automatically.
My understanding was that PLATFORM.moduleName must only be used for views.

Unfortunately it is not possible to post the complete application.

Thanks for the help anyway

1 Like
8

Hi,
any ideas? I am grateful for any help.

1 Like
9

That’s not true. I it when configuring routes in configureRouter. In the JS examples it wasn’t required to do this, but nothing worked in my TS project unless I used it. My routes all start with this form:

{ route: ‘about’, moduleId: PLATFORM.moduleName(‘about/index’)

1 Like
10

Hi,

but look at my example, it’s not a route. It’s a simple TS class that’s being referenced. And because of this reference, the list class cannot be loaded.
Any Idea why?

1 Like
11

PLATFORM.moduleName is used not just only for views. It’s a way to tell webpack that find the module being pointed to, and also try to find if there’s any view associated with it, via convention.