Hi,
I have a problem with dotnet spa templates for aurelia.
I have the error below:
System.AggregateException: ‘One or more errors occurred. (TypeError: Cannot read property ‘aurelia-id’ of undefined
at Object.keys.map.k (C:\APP\node_modules\aurelia-webpack-plugin\dist\AureliaPlugin.js:124:51)
at Array.map ()
at dllRefPlugins.map.plugin (C:\APP\node_modules\aurelia-webpack-plugin\dist\AureliaPlugin.js:124:22)
at Array.map ()
at AureliaPlugin.apply (C:\APP\node_modules\aurelia-webpack-plugin\dist\AureliaPlugin.js:121:48)
at webpack (C:\APP\node_modules\webpack\lib\webpack.js:37:12)
at attachWebpackDevMiddleware (C:\APP\node_modules\aspnet-webpack\WebpackDevMiddleware.js:71:20)
at C:\APP\node_modules\aspnet-webpack\WebpackDevMiddleware.js:271:25
at Array.forEach ()
at Server. (C:\APP\node_modules\aspnet-webpack\WebpackDevMiddleware.js:234:36)
)’
My package.json:
{
“name”: “App”,
“private”: true,
“version”: “0.0.0”,
“devDependencies”: {
“@types/webpack-env”: “^1.13.0”,
“ajv”: “^6.5.2”,
“aspnet-webpack”: “^3.0.0”,
“aurelia-bootstrapper”: “^2.3.0”,
“aurelia-fetch-client”: “^1.4.0”,
“aurelia-framework”: “^1.3.0”,
“aurelia-loader-webpack”: “^2.2.1”,
“aurelia-pal”: “^1.8.0”,
“aurelia-router”: “^1.6.1”,
“aurelia-webpack-plugin”: “^3.0.0”,
“bootstrap”: “^4.1.1”,
“css-loader”: “^1.0.0”,
“file-loader”: “^1.1.11”,
“html-loader”: “^0.5.5”,
“isomorphic-fetch”: “^2.2.1”,
“jquery”: “^3.3.1”,
“json-loader”: “^0.5.7”,
“popper.js”: “^1.14.3”,
“style-loader”: “^0.21.0”,
“ts-loader”: “^4.4.2”,
“typescript”: “^2.9.2”,
“url-loader”: “^1.0.1”,
“webpack”: “^4.15.1”,
“webpack-dev-middleware”: “^3.1.3”,
“webpack-hot-middleware”: “^2.18.0”
}
}
webpack.config.js:
const path = require(‘path’);
const webpack = require(‘webpack’);
const { AureliaPlugin } = require(‘aurelia-webpack-plugin’);
const bundleOutputDir = ‘./wwwroot/dist’;
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
entry: { ‘app’: ‘aurelia-bootstrapper’ },
resolve: {
extensions: [’.ts’, ‘.js’],
modules: [‘ClientApp’, ‘node_modules’]
},
output: {
path: path.resolve(bundleOutputDir),
publicPath: ‘dist/’,
filename: ‘[name].js’
},
module: {
rules: [
{ test: /.ts$/i, include: /ClientApp/, use: ‘ts-loader?silent=true’ },
{ test: /.html$/i, use: ‘html-loader’ },
{ test: /.css$/i, use: isDevBuild ? ‘css-loader’ : ‘css-loader?minimize’ },
{ test: /.(png|jpg|jpeg|gif|svg)$/, use: ‘url-loader?limit=25000’ }
]
},
plugins: [
new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require(’./wwwroot/dist/vendor-manifest.json’)
}),
new AureliaPlugin({ aureliaApp: ‘boot’ }),
new webpack.DefinePlugin({
includeSubModules: [
{ moduleId: “aurelia-validation” }
]
})
].concat(isDevBuild ? [
new webpack.SourceMapDevToolPlugin({
filename: ‘[file].map’, // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, ‘[resourcePath]’) // Point sourcemap entries to the original file locations on disk
})
] : [
new webpack.optimize.UglifyJsPlugin()
])
}];
};
boot.ts
import 'isomorphic-fetch';
import { Aurelia, PLATFORM } from 'aurelia-framework';
import { HttpClient } from 'aurelia-fetch-client';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build
export function configure(aurelia: Aurelia) {
aurelia.use.standardConfiguration();
aurelia.use.plugin(PLATFORM.moduleName('aurelia-validation'))
if (IS_DEV_BUILD) {
aurelia.use.developmentLogging();
}
new HttpClient().configure(config => {
const baseUrl = document.getElementsByTagName('base')[0].href;
config.withBaseUrl(baseUrl);
});
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app/components/app/app')));
}
Please help