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

Help Requests
1

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
2

Did you update index.ejs?

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

That did it, thanks!!

1 Like
4

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
5

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
6

Late to the party (was looking for something else)

I’m curious @davidlav, are you moving your main.ts to coincide with what your production environment will be? If so, you could just change the “baseUrl” const in webpack.config.js

Kremnari

1 Like
7

It was part of migrating an already existing jQuery/Handlebars application over to Aurelia and I initially wanted to keep the folder structure as original as I could.

I could be totally wrong, but isn’t baseURL more for resolving a route or URL than for telling Webpack where to find the source files? Like if I were hosting the application on GitHub pages and it was at the URL user.github.com/project-name, then my baseURL would be project-name, not client.

At any rate, we ultimately solved it by changing module.exports.resolve.modules from [path.resolve(__dirname, 'src'), 'node_modules'] to [path.resolve(__dirname, 'src/client'), 'node_modules'].

1 Like
8

You are of course correct, a trick I found out about myself when setting my dist folder directly into my dev server.

I was just curious about the why of your folder structure, which you answered.

Keep on coding!

1 Like