aurelia-webpack-loader cannot find module aurelia-loader-context

Question

I am trying to update the webpack version of a legacy app that uses aurelia and I am having an issue that is either related to the config or a version mismatch.

When I try to build and run the app with webpack serve I receive the following errors:

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

Here are the files that I feel are probably relevant, but please let me know if I leave something out:

package.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"
  }
}

webpack.config.js:

// 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;

main.js:

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: '[email protected]',
        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));
}

I have been following aurelia docs as well as the basic webpack migration docs, but I am stuck with these errors.

I have researched this issue and found some closed github issues that claim the issue was addressed, but no solution has been given. Any help would be appreciated.

Thanks so much!