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

[BRCornelius]

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:

{
  "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:

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:

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

[bigopon]

Thanks for the report though it's likely impossible for us to find out the issue. Can you search around the repo to see if anything similar reported before? For example, this is my search https://github.com/search?q=repo%3Aaurelia%2Floader-webpack+aurelia-loader-context&type=issues

Also, have you made sure all the dependencies resolved properly and there's no duplicates? Maybe try clean the node_modules and delete lock file and reinstall dependencies first?