We recently trying to upgrade really old aurelia app to use latest webpack and aurelia cli.
am getting following error when i try to use bundles generated for webpack 5.70
TypeError: e.ConsoleAppender is not a constructor
y common.8b16d58387793d052fd8.bundle.js?v=9gvb5vLaGQeyQeNpKB6akAkiraOklLPKx1fVO5E9l8M:2
promise callbackaurelia-framework/e.prototype.developmentLogging/y</< Render/js/common.8b16d58387793d052fd8.bundle.js?v=9gvb5vLaGQeyQeNpKB6akAkiraOklLPKx1fVO5E9l8M:2
promise callbackaurelia-framework/e.prototype.developmentLogging/y< Render/js/common.8b16d58387793d052fd8.bundle.js?v=9gvb5vLaGQeyQeNpKB6akAkiraOklLPKx1fVO5E9l8M:2
webpack.config.js
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const CopyWebpackPlugin = require(‘copy-webpack-plugin’);
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
const DuplicatePackageCheckerPlugin = require(‘duplicate-package-checker-webpack-plugin’);
const project = require(‘./aurelia_project/aurelia.json’);
const { AureliaPlugin } = require(‘aurelia-webpack-plugin’);
const { ProvidePlugin } = require(‘webpack’);
const { BundleAnalyzerPlugin } = require(‘webpack-bundle-analyzer’);
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);
const webpack = require(‘webpack’);
const { WebpackManifestPlugin } = require(‘webpack-manifest-plugin’);
// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || ;
const when = (condition, config, negativeConfig) =>
condition ? ensureArray(config) : ensureArray(negativeConfig);
const title = ‘Assessment Renderer’;
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, ‘src’);
const nodeModulesDir = path.resolve(__dirname, ‘node_modules’);
const baseUrl = ‘/’;
const cssRules = [
{
loader: ‘css-loader’
}
];
const sassRules = [
{
loader: “sass-loader” }
];
module.exports = ({ production }, { analyze, hmr, port, host }) => ({
resolve: {
extensions: [‘.js’],
modules: [srcDir, ‘node_modules’],
alias: {
'aurelia-binding': path.resolve(__dirname, 'node_modules/aurelia-binding'),
'jquery-ui': path.resolve(__dirname, 'static/jquery-ui/jquery-ui.js')
}
},
entry: {
app: [
'aurelia-bootstrapper'
],
vendor: !production ? ['jquery', 'jquery-ui'] : [
'ag-grid-community',
'ag-grid-aurelia',
'jquery',
'jquery-ui',
'mark.js',
'moment',
'showdown'
],
polyfill: [ ‘aurelia-polyfills’]
},
mode: production ? ‘production’ : ‘development’,
output: {
path: outDir,
publicPath: baseUrl,
filename: production ? ‘[name].[chunkhash].bundle.js’ : ‘[name].[fullhash].bundle.js’,
chunkFilename: production ? ‘[name].[chunkhash].chunk.js’ : ‘[name].[fullhash].chunk.js’,
},
optimization: {
runtimeChunk: false,
moduleIds: 'deterministic',
splitChunks: {
hidePathInfo: true,
chunks: "initial",
cacheGroups: {
default: false,
vendorsAsync: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors.async',
chunks: 'async',
priority: 9,
reuseExistingChunk: true,
},
commons: {
name: 'common',
chunks: 'initial'
},
commonsAsync: {
name: 'commons.async',
chunks: 'async',
priority: 0,
reuseExistingChunk: true,
}
}
}
},
performance: { hints: false },
devServer: {
historyApiFallback: true,
hot: false,
host: ‘localhost’,
proxy: {
‘/[Rr]ender/**’: {
target: http://localhost:3000,
secure: false,
},
},
},
devtool: production ? undefined : ‘cheap-module-source-map’,
module: {
rules: [
{
test: /\.css$/i,
issuer: { not: [ /\.html$/i ] },
use: [ { loader: MiniCssExtractPlugin.loader }, ...cssRules ]
},
{
test: /\.css$/i,
issuer: /\.html$/i,
use: cssRules
},
{
test: /\.scss$/,
use: [ { loader: MiniCssExtractPlugin.loader }, ...cssRules, ...sassRules ],
issuer: /\.[tj]s$/i
},
{
test: /\.scss$/,
use: [...cssRules, ...sassRules],
issuer: /\.html?$/i
},
{ test: /\.html$/i, loader: 'html-loader', options: { minimize: false } },
{ test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir },
{ test: /\.json$/i, loader: 'json-loader' },
// embed small images and fonts as Data Urls and larger ones as files:
{ test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset' },
{ test: /\.(woff|woff2|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, type: 'asset' },
{ test: /environment\.json$/i, use: [
{loader: "app-settings-loader", options: {env: production ? 'production' : 'development' }},
]}
]
},
plugins: [
new DuplicatePackageCheckerPlugin(),
new AureliaPlugin(),
new ProvidePlugin({
‘jQuery’: ‘jquery’,
‘$’: ‘jquery’,
‘window.jQuery’: ‘jquery’,
‘window.$’: ‘jquery’
}),
new WebpackManifestPlugin({
fileName: 'RendererScriptsManifest.json'
}),
new WebpackManifestPlugin({
fileName: ‘RendererScriptsManifest.json’,
publicPath: ‘’,
generate: (seed, files) => {
const manifestFiles = files.reduce((manifest, file) => {
manifest[file.name] = file.path;
return manifest;
}, {});
return {
vendor: manifestFiles['vendor.js'],
polyfill: manifestFiles['polyfill.js'],
app: manifestFiles['app.js'],
common: manifestFiles['common.js'],
};
},
}),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: ‘index.ejs’,
minify: production ? {
removeComments: true,
collapseWhitespace: true
} : undefined,
metadata: {
// available in index.ejs //
baseUrl
}
}),
new HtmlWebpackPlugin({
filename: ‘frame.html’,
template: ‘frame.ejs’,
metadata: {
title, baseUrl
},
chunks: ['common', 'polyfill', 'vendor', 'app'],
chunksSortMode: 'manual'
}),
new MiniCssExtractPlugin({
filename: production ? '[name].[contenthash].bundle.css' : '[name].[fullhash].bundle.css',
chunkFilename: production ? '[name].[contenthash].chunk.css' : '[name].[fullhash].chunk.css'
}),
new CopyWebpackPlugin({
patterns: [
{ from: 'static', to: outDir, globOptions: { ignore: ['.*'] } }
]
}), // ignore dot (hidden) files
...when(analyze, new BundleAnalyzerPlugin()),
new CleanWebpackPlugin(),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
})
]
});
package.json:
{
“name”: “assessment-renderer-”,
“description”: “An Aurelia client application.”,
“version”: “0.1.0”,
“repository”: {
“type”: “???”,
“url”: “???”
},
“dependencies”: {
“aurelia-animator-css”: “1.0.4”,
“aurelia-bootstrapper”: “2.4.0”,
“aurelia-dialog”: “2.0.0-rc.5”,
“aurelia-fetch-client”: “1.8.2”,
“aurelia-framework”: “1.4.1”,
“aurelia-http-client”: “1.3.1”,
“aurelia-logging-console” :“1.1.1”,
“aurelia-pal”: “1.8.2”,
“aurelia-router”: “1.7.1”,
“aurelia-templating”: “1.11.1”,
“aurelia-templating-binding”: “1.6.0”,
“aurelia-templating-resources”: “1.14.3”,
“aurelia-templating-router”: “1.5.0”,
“bluebird”: “3.7.2”,
“bootstrap”: “3.4.1”,
“jquery”: “3.6.3”,
“jquery-ui”: “1.13.0-rc.3”,
“popper.js”: “1.16.1”,
“whatwg-fetch”: “3.6.2”
},
“devDependencies”: {
“@babel/core”: “^7.20.7”,
“@babel/eslint-parser”: “7.19.1”,
“@babel/plugin-proposal-class-properties”: “7.18.6”,
“@babel/plugin-proposal-decorators”: “7.20.7”,
“@babel/plugin-syntax-dynamic-import”: “7.8.3”,
“@babel/preset-env”: “7.20.2”,
“@babel/register”: “7.18.9”,
“ag-grid-aurelia”: “21.0.1”,
“ag-grid-community”: “29.3.3”,
“app-settings-loader”: “2.0.7”,
“aurelia-cli”: “3.0.1”,
“aurelia-loader-nodejs”: “1.1.0”,
“aurelia-pal-nodejs”: “2.0.0”,
“aurelia-testing”: “1.1.0”,
“aurelia-webpack-plugin”: “5.0.5”,
“autoprefixer”: “10.4.13”,
“babel-jest”: “29.3.1”,
“babel-loader”: “9.1.0”,
“babel-plugin-istanbul”: “6.1.1”,
“body-parser”: “1.20.2”,
“clean-webpack-plugin”: “4.0.0”,
“concurrently”: “^8.0.1”,
“copy-webpack-plugin”: “11.0.0”,
“css-loader”: “6.7.3”,
“cssnano”: “5.1.14”,
“duplicate-package-checker-webpack-plugin”: “3.0.0”,
“eslint”: “^8.30.0”,
“expose-loader”: “4.0.0”,
“express”: “4.18.2”,
“gulp”: “4.0.2”,
“gulp-eslint”: “6.0.0”,
“html-loader”: “4.2.0”,
“html-webpack-plugin”: “5.5.0”,
“jest”: “29.3.1”,
“jest-cli”: “29.3.1”,
“jest-transform-stub”: “2.0.0”,
“json-loader”: “0.5.7”,
“mini-css-extract-plugin”: “2.7.2”,
“minimatch”: “5.1.2”,
“postcss”: “8.4.20”,
“postcss-loader”: “7.0.2”,
“promise-polyfill”: “8.2.3”,
“regenerator-runtime”: “0.13.11”,
“sass”: “1.57.1”,
“sass-loader”: “13.2.0”,
“showdown”: “2.1.0”,
“style-loader”: “3.3.1”,
“through2”: “4.0.2”,
“tree-kill”: “1.2.2”,
“webpack”: “5.70.0”,
“webpack-bundle-analyzer”: “4.7.0”,
“webpack-cli”: “5.0.1”,
“webpack-dev-server”: “4.11.1”,
“webpack-manifest-plugin” : “5.0.0”
},
“browserslist”: [
“defaults”
],
“scripts”: {
“build”: “webpack --env production”,
“start”: “concurrently "npm run mock-api" "npm run app"”,
“mock-api”: “node server.js”,
“build:dev”: “webpack”,
“analyze”: “webpack --env production --analyze”,
“test”: “au test”,
“app”: “npx webpack serve --mode development”
},
“engines”: {
“node”: “>=14.15.0”
},
“overrides”: {
“chokidar”: “^3.0.0”,
“glob-stream”: “^7.0.0”,
“glob-parent”: “^6.0.0”,
“micromatch”: “^4.0.0”
},
“jest”: {
“testMatch”: [
“/test//*.spec.js"
],
“moduleNameMapper”: {
“^aurelia-binding$”: “/node_modules/aurelia-binding”
},
“modulePaths”: [
“/src”,
“/node_modules”
],
“moduleFileExtensions”: [
“js”,
“json”
],
“transform”: {
“^.+\.(css|less|sass|scss|styl|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$”: “jest-transform-stub”,
“^.+\.js$”: “babel-jest”
},
“setupFiles”: [
“/test/jest-pretest.js”
],
“testEnvironment”: “node”,
“collectCoverage”: true,
“collectCoverageFrom”: [
"src//.js",
"!**/.spec.js”,
“!/node_modules/”,
“!/test/”
],
“coverageDirectory”: “/test/coverage-jest”,
“coverageReporters”: [
“json”,
“lcov”,
“text”,
“html”
]
}
}
Any help is appreciated