Hey There!
I’m trying to learn how to use Aurelia with Webpack (I’m new to both these technologies) and while I’ve managed to get the the source code to bundle and Aurelia to bootstrap, every time I run my site I get the following error:
Uncaught (in promise) Error: Unable to find module with ID: routing.html
at WebpackLoader.<anonymous> (vendors.66d6ee110672fb689536.js:7713)
at step (vendors.66d6ee110672fb689536.js:7574)
at Object.next (vendors.66d6ee110672fb689536.js:7555)
at vendors.66d6ee110672fb689536.js:7549
at new Promise (<anonymous>)
at push../node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js.__awaiter (vendors.66d6ee110672fb689536.js:7545)
at WebpackLoader.push../node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js.WebpackLoader._import (vendors.66d6ee110672fb689536.js:7680)
at WebpackLoader.<anonymous> (vendors.66d6ee110672fb689536.js:7778)
at step (vendors.66d6ee110672fb689536.js:7574)
at Object.next (vendors.66d6ee110672fb689536.js:7555)
This is my current project structure:
- /root/
- /dist/
- /src/
- /app/
- /css/
- main.ts
- routing.html
- routing.ts
Inside /app/ and /css/ are the various components and their views. /dist/ is where Webpack outputs the vendor.js, runtime.js and app.js chunks as well as my index.html page and any transpiled css files. /dist/ also acts as the root directory for the website.
This is my Webpack config file (it currently runs as a build script)
const compiler = webpack(
{
mode: "development",
devtool: false,
context: __dirname + "/../",
entry:
{
app: ["aurelia-bootstrapper"]
},
output:
{
path: __dirname + "/../dist",
filename: "[name].[contenthash].js"
},
optimization:
{
runtimeChunk: "single",
splitChunks:
{
cacheGroups:
{
vendor:
{
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
}
}
}
},
module:
{
rules:
[
{ test: /\.ts$/, use: "ts-loader", exclude: "/node_modules/" },
{ test: /\.html$/i, use: "html-loader" },
]
},
resolve:
{
extensions: [".ts", ".js", ".html" ],
modules: [ "./src", "./node_modules" ]
},
plugins: [new HtmlWebpackPlugin({ template:"./index.html", title: "This is my site" }), new AureliaPlugin() ]
});
the index.html file sitting in dist looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Aurelia Test</title>
</head>
<body aurelia-app="main">
<script type="text/javascript" src="runtime.01308d7cc7f8f5e719e6.js"></script>
<script type="text/javascript" src="vendors.66d6ee110672fb689536.js"></script>
<script type="text/javascript" src="app.25a8bf1c34ff7b3997ab.js"></script>
</body>
</html>
my main.ts file contains:
import { Aurelia } from "aurelia-framework"
import { PLATFORM } from "aurelia-pal";
export function configure(aurelia: Aurelia)
{
aurelia.use.basicConfiguration();
aurelia.start().then(() => aurelia.setRoot( PLATFORM.moduleName("routing") ));
}
Looking at the app bundle, all the necessary code needed to run the app is there. So the problem is why it can’t find the routing.html file (also, why is it treating the html file like a module?). Any help would be appreciated. Let me know if you need any more information.
Thanks!