No view model found in module "App"
ckotzbauer opened this issue · 5 comments
Hi,
I'm currently trying to migrate my application to the new Aurelia/Webpack stack. I resolved a few issues with small code changes and your great docs. But now, I don't know what to do:
I get this exception on app startup:
Unhandled rejection Error: No view model found in module "App".
at http://localhost:8081/assets/main.js:4079:15
at tryCatcher (http://localhost:8081/assets/main.js:30221:23)
at Promise._settlePromiseFromHandler (http://localhost:8081/assets/main.js:29438:31)
at Promise._settlePromise (http://localhost:8081/assets/main.js:29495:18)
at Promise._settlePromise0 (http://localhost:8081/assets/main.js:29540:10)
at Promise._settlePromises (http://localhost:8081/assets/main.js:29619:18)
at Async._drainQueue (http://localhost:8081/assets/main.js:27011:16)
at Async._drainQueues (http://localhost:8081/assets/main.js:27021:10)
at Async.drainQueues (http://localhost:8081/assets/main.js:26895:14)
at MutationObserver.<anonymous> (http://localhost:8081/assets/main.js:29993:17)
The configuration of the AureliaPlugin in my webpack.config.js:
new AureliaPlugin({
includeAll: "app",
aureliaApp: "Main",
viewsFor: string = "app/**/*.{ts,js}"
})
I executed webpack with --display-modules and I saw, that several modules (including App) are listed twice. Once for the ViewModel and once for the HTML-File:
[Main] ./app/Main.ts 2.98 kB {0} [built]
[App] ./app/App.ts 3.37 kB {0} [built]
[App] ./app/App.html 560 bytes {0} [built]
[user/UserProfile] ./app/user/UserProfile.html 3.13 kB {0} [built]
[user/UserProfile] ./app/user/UserProfile.ts 3.77 kB {0} [built]
...
App is resolved in Main with PLATFORM.moduleName:
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("App"), document.body.children[0]));
I analyzed the code in ViewEngine where the Exception occurs:
importViewModelResource(moduleImport: string, moduleMember: string): Promise<ResourceDescription> {
return this.loader.loadModule(moduleImport).then(viewModelModule => {
...
});
}
As parameter moduleImport this function received "App".
As imported module viewModelModule there was the content of "App.html" file as string.
It looks like Aurelia simply analyzed the "wrong" module named "App".
Some environment infos:
- Windows 10
- Node 7.6.0
- NPM 4.1.2
- Webpack 2.2.1
- Latest Aurelia library versions or Release Candidates as required.
Maybe you have an idea, why this happens. Thanks!!
[App] ./app/App.ts 3.37 kB {0} [built]
[App] ./app/App.html 560 bytes {0} [built]
That's bad. I don't know why it isn't but the second module should be called App.html.
Can you share your project or at least your complete webpack.config.js?
Unrelated: aureliaApp is ignored when using includeAll.
Unrelated as well: if you use the latest Aurelia bits you don't need the coreDeps plugin anymore.
The problem is resolve.extensions: ['.ts', '.js', '.scss', '.css', '.html'].
This tells webpack to automatically add those extensions (in order) when trying to resolve a module name.
AureliaPlugin uses this info to normalize names by removing the default extensions.
Because both .html and .ts are in the list, they get both removed, leading to the problematic situation above.
What's the reason for this configuration? Usually people only put their default script extensions in the list. At runtime, aurelia-loader expects explicit extensions for ressources such as views and stylesheets.
There is no reason for this. This was an old relict. I removed the coreDeps and the html, scss and css extensions and it seems to work ;). Thanks for your investigation and your great work!!
No problem.