Moving the location of the root app component from src/ with Webpack

I’m trying to figure out how to bootstrap Aurelia with the following file locations:

src/client/main.ts
src/client/aurelia/app.ts
src/client/aurelia/app.html

I got Webpack to find main.ts with:

new AureliaPlugin({ aureliaApp: 'client/main' })

Then in main.ts I have:

aurelia.setRoot(PLATFORM.moduleName('client/aurelia/app'))

which makes Webpack happy and it technically compiles. However, when I go to the browser, I get:

Error: Unable to find module with ID: app
at WebpackLoader.eval (aurelia-loader-webpack.js:187)
at step (aurelia-loader-webpack.js:48)
at Object.eval [as next] (aurelia-loader-webpack.js:29)
at eval (aurelia-loader-webpack.js:23)
at new Promise (<anonymous>)
at __awaiter (aurelia-loader-webpack.js:19)
at WebpackLoader._import (aurelia-loader-webpack.js:154)
at WebpackLoader.eval (aurelia-loader-webpack.js:252)
at step (aurelia-loader-webpack.js:48)
at Object.eval [as next] (aurelia-loader-webpack.js:29)
1 Like

Did you update index.ejs?

<body aurelia-app="client/main">
1 Like

That did it, thanks!!

1 Like

It’s against common sense.
If I set aureliaApp: 'client/main' in AureliaPlugin, I would expect this explicit config should be used regardless what’s in html template.

It doesn’t make much sense to ask user to set same config in two places. I consider this is a bug in our aurelia-webpack-plugin.

Update: not a webpack-plugin bug, but rather a limitation. The aurelia-bootstrapper only reads DOM to find out aurelia-app (or data-aurelia-app) attribute, there is no other API provided for webpack-plugin to fix the entry module.

For slightly better config in current situation, remove aureliaApp from your AureliaPlugin config. The attribute in html body is sufficient. <body aurelia-app="client/main"> wrong suggestion. (I was running watch mode)

1 Like

I completely agree. And I think that’s why it confused me for so long because, just like you said, I figured that if I set the location aureliaApp: 'client/main' in the AureliaPlugin, that that would override whatever’s in the HTML.

And just like you said and then retracted, I tried removing that line from my webpack config after I added it to the HTML, but that broke it again. So it definitely does need to be in both places.

So far as I can tell there’s nothing in the official documentation that tells you how to do this, which I find surprising since it can’t be that uncommon of a scenario.

1 Like