Error: Can't resolve 'aurelia-loader-context'

**I'm submitting a bug report**

* **Library Version:**
major.minor.patch-pre

**Please tell us about your environment:**
* **Operating System:**
Windows 10

* **Node Version:**
16.16.0

* **NPM Version:**
9.3.1

* **JSPM OR Webpack AND Version**
webpack: 4.46.0
webpack-cli: 4.10.0
webpack-dev-server 3.11.3

* **Browser:**
all

* **Language:**
js

**Current behavior:**
I am in the process of updating webpack from v2 to v4 to alleviate security issues found by a blackduck scan.

when running `webpack serve`, I am getting this error:
```
ERROR in ./node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js
Module not found: Error: Can't resolve 'aurelia-loader-context' in 'C:\Users\bxc20\Desktop\VS\aspice\aspice-web-admin\Admin\node_modules\aurelia-bootstrapper-webpack\node_modules\aurelia-loader-webpack\dist\native-modules'
@ ./node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js 134:23-64
@ ./node_modules/aurelia-bootstrapper-webpack/dist/native-modules/aurelia-bootstrapper-webpack.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper aurelia-bootstrapper-webpack aurelia-polyfills aurelia-pal aurelia-pal-browser regenerator-runtime whatwg-fetch

ERROR in ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
Module not found: Error: Can't resolve 'main' in 'C:\Users\bxc20\Desktop\VS\aspice\aspice-web-admin\Admin\node_modules\aurelia-webpack-plugin\runtime'
@ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry ./src/main`
```

My package.json looks like this:
```json
{
"name": "aurelia-webpack-admin",
"version": "2.0.0",
"description": "Administrative application for managing Acuity IPS applications.",
"scripts": {
"test": "cross-env BABEL_ENV=node NODE_ENV=test ./node_modules/karma/bin/karma start test/karma.conf.js",
"start": "npm run server:dev",
"starts": "npm run server:devs",
"webdriver:stop": "webdriver-manager stop",
"webdriver:update": "webdriver-manager update",
"webdriver:start": "webdriver-manager start",
"protractor:e2e": "protractor ./test/conf",
"server:dev": "cross-env NODE_ENV=production webpack serve --history-api-fallback --watch-content-base --content-base src/",
"server:devs": "cross-env NODE_ENV=development webpack serve --history-api-fallback --watch-content-base --content-base src/ --https",
"build:dev": "cross-env NODE_ENV=development webpack",
"build:prod": "cross-env NODE_ENV=production webpack"
},
"devDependencies": {
"@babel/core": "^7.22.5",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.22.5",
"aurelia-hot-module-reload": "0.1.0",
"aurelia-protractor-plugin": "1.0.1",
"aurelia-webpack-plugin": "4.0.0",
"babel-loader": "8.2.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-es2017": "^6.16.0",
"babel-register": "^6.26.0",
"concurrently": "^7.0.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^7.0.3",
"css-loader": "^0.28.0",
"file-loader": "^2.0.0",
"hawk": "^7.1.2",
"html-loader": "^0.5.0",
"html-webpack-plugin": "^3.1.0",
"jasmine-core": "^3.10.1",
"jasmine-reporters": "^2.3.0",
"karma": "^6.4.2",
"karma-chrome-launcher": "^3.2.0",
"karma-jasmine": "^5.1.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-sourcemap-loader": "^0.4.0",
"karma-webpack": "4.0.2",
"less": "^3.9.0",
"less-loader": "^4.0.3",
"mock-json-api": "^0.2.7",
"pem": "^1.9.4",
"protractor": "^7.0.0",
"protractor-fail-fast": "^3.0.2",
"raw-loader": "^0.5.1",
"redux-logger": "^3.0.6",
"request": "^2.88.2",
"request-json": "^0.6.2",
"style-loader": "^0.13.1",
"wait-on": "^6.0.0",
"webdriver-manager": "^11.1.1",
"webpack": "4.46.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "3.11.3"
},
"dependencies": {
"aurelia-bootstrapper": "^2.4.0",
"aurelia-bootstrapper-webpack": "^1.1.0",
"aurelia-event-aggregator": "1.0.1",
"aurelia-fetch-client": "1.4.0",
"aurelia-framework": "1.4.1",
"aurelia-history-browser": "1.2.0",
"aurelia-http-client": "1.3.0",
"aurelia-loader": "^1.0.2",
"aurelia-loader-webpack": "2.2.5",
"aurelia-logging-console": "1.0.0",
"aurelia-pal": "^1.8.2",
"aurelia-pal-browser": "1.8.0",
"aurelia-polyfills": "1.3.0",
"aurelia-route-recognizer": "1.2.0",
"aurelia-router": "1.5.0",
"aurelia-templating-binding": "1.4.1",
"aurelia-templating-resources": "1.6.0",
"aurelia-templating-router": "1.3.1",
"aurelia-validation": "1.1.2",
"copy-webpack-plugin": "4.2.3",
"detect-browser": "^3.0.1",
"es6-promise-promise": "^1.0.0",
"flatpickr": "~4.4.2",
"json-loader": "^0.5.7",
"leaflet": "1.0.2",
"leaflet-draw": "0.4.9",
"moment": "^2.29.4",
"redux": "^4.0.5",
"redux-thunk": "^2.4.2",
"whatwg-fetch": "^2.0.2"
}
}
```

My main.js looks like:
```ts
import env from 'env';
import ConfigService from './services/config-service';
import { login, authenticateUser, getCachedUser } from './application/auth';
import '../styles/styles.less';
import { detectBrowser } from './util/browser-detection';

import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from "aurelia-pal";
import {bootstrap} from 'aurelia-bootstrapper-webpack';
import { WebpackLoader } from 'aurelia-loader-webpack';

require('!style-loader!css-loader!leaflet-draw/dist/leaflet.draw.css');

export function configure(aurelia) {
function startApp(config, user) {
config.user = user;
bootstrap(async () => {
aurelia.use.standardConfiguration()
.plugin('aurelia-validation');

if (env.debug) aurelia.use.developmentLogging();

aurelia.loader.registerLoader(WebpackLoader)

await aurelia.start()
aurelia.setRoot(PLATFORM.moduleName('/src/main.js'));
})
}

let testUser = {
userName: 'testUser@mockserver.com',
profile: {}
};
this.browser = detectBrowser();
ConfigService.getConfig().then(config => {
if (!config.testing && this.browser.name !== 'ie') {
authenticateUser(config).then(user => {
if (user) {
startApp(config, user);
} else {
login(config);
}
}).catch(err => console.log('Main:Error with authentication', err));
} else {
startApp(config, testUser);
}
}).catch(err => console.log('Error with config file', err));
}
```

My webpack.config.js looks like:
```ts
// The plugin that loads your source code in Aurelia.
const { AureliaPlugin } = require('aurelia-webpack-plugin');

// This is siteActions node tool to resolve paths.
const path = require('path');

// We need this to use the CommonsChunkPlugin.
const webpack = require('webpack');

// The plugin that adds the script tags to our index.html
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const ENV = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() || 'development';
const project = require('./package.json');

// basic configuration:
const title = 'Acuity IPS Admin';
const baseUrl = '/';
const rootDir = path.resolve();
const srcDir = path.resolve('src');
const outDir = path.resolve(__dirname, 'dist');

const bootstrap = [
'aurelia-bootstrapper',
'aurelia-bootstrapper-webpack',
'aurelia-polyfills',
'aurelia-pal',
'aurelia-pal-browser',
'regenerator-runtime',
'whatwg-fetch'
];
const vendor = [
'leaflet',
'leaflet-draw',
'moment',
'flatpickr',
'redux',
'redux-thunk',
'redux-logger'
];
const aurelia = Object.keys(project.dependencies).filter(dep => dep.startsWith('aurelia-'));

console.log(aurelia)

const config = {
// Sets mode as per v4 migration
mode: ENV,

devtool: 'inline-source-map',
performance: {hints: false},

entry: {
'main': './src/main',
'bootstrap': bootstrap,
'aurelia': aurelia,
'vendor': vendor
},

resolve: {
alias: {
env: path.join(__dirname, 'src/config/env-dev.js')
}
},

output: {
//This is the folder where our packed app will be after we run webpack.
publicPath: '/',
path: outDir,
filename: 'scripts/[name].[hash].bundle.js',
sourceMapFilename: 'scripts/[name].[hash].map',
chunkFilename: 'scripts/[name].[id].[hash].chunk.js'
},

module: {
// Loaders is changed to rules in v4 migration
rules: [
//This loader runs babel for every js file so the files are transpiled to ES5 javascript.
//NOTE: Additional Babel settings are in the .babelrc file
{
test: /\.js?$/,
exclude: [/node_modules/, path.resolve('./**/*.spec.js')],
loader: "babel-loader",
options: {
code: true,
rootMode: 'upward',
presets: ['@babel/preset-env']
}
},

//This loader reads our html templates that are referenced and bundles them with our javascript.
{test: /\.html$/, exclude: [/node_modules/, path.resolve('src/index.html')], loader: 'html-loader'},

// LESS and CSS files
{test: /\.css$/, exclude: /node_modules/,
loader: 'style-loader!css-loader?-minimize'},
{test: /\.less$/, exclude: /node_modules/,
loader: "style-loader!css-loader?-minimize!less-loader"},
// File loader for supporting images, for example, in CSS files.
{test: /\.(png|gif|jpg|svg)$/, loader: "file-loader?name=/images/[name].[ext]"}
],
},

// Added in wbpack v4 migration
optimization: {
splitChunks: {
chunks: 'all'
}
},

plugins: [
new webpack.ProvidePlugin({
Promise: 'es6-promise-promise'
}),
//The Aurelia Plugin.
new AureliaPlugin(),

// REMOVE for v4 migration
// This is what will create siteActions separate bundle for the libs under 'aurelia'
// in our entry section.
// new webpack.optimization.splitChunks({
// name: ['bootstrap', 'aurelia', 'vendor'].reverse()
// }),

// This plugin will add our bundles to the html file and copy it
// to the build folder.
new HtmlWebpackPlugin({
template: 'index.html',
chunksSortMode: 'auto'
}),

new CopyWebpackPlugin([
// Copy directory contents to {output}/to/directory/
//{ from: 'assets', to: 'assets' },
{from: 'src/config', to: 'config'},
//{from: 'web.config', to: 'web.config'}
])
],
node: {
fs: "empty"
},
//Development Server Settings
devServer: {
port: 8080
}
}

//DEVELOPMENT BUILD SETTINGS
//TODO: split webpack configs into development and production files?
if (ENV === 'development') {
//Add development build specific changes
}

//PRODUCTION BUILD SETTINGS
if (ENV === 'production') {
// config.devtool = 'cheap-module-source-map';
//
config.resolve = {
alias: {
env: path.join(__dirname, 'src/config/env-prod.js')
}
};
//
// //Add any additional PROD or QA plugins
// config.plugins.push(
// new webpack.optimize.UglifyJsPlugin({
// minimize: true,
// sourceMap: config.devtool && (config.devtool.indexOf("sourcemap") >= 0 || config.devtool.indexOf("source-map") >= 0)
// })
// );
config.plugins.push(
new CopyWebpackPlugin([
{from: 'npm-dist', to: '.'}
])
)
}

module.exports = config;
```

**Expected/desired behavior:**
I would like to be able to build and run my application without the errors

Start with webpack.config.js, package.json, and the webpack serve command. Trace the aurelia-bootstrapper-webpack and aurelia-loader-webpack entries shown in the build errors, then compare them with the imports and bootstrap setup in src/main.js. Done means webpack serve resolves both aurelia-loader-context and main without either module-not-found error.

Written by the indexing model from the issue text.