Cannot initialize module "Main" without a configure function (Webpack 5)

[ckotzbauer]

I'm submitting a bug report

• Library Version: Current master-Version of this project.

Please tell us about your environment:

• Operating System:

• Linux Ubuntu 21.04

• Node Version: 15.13.0

• NPM Version: 7.7.6

• JSPM OR Webpack AND Version Webpack 5.38.1

• Browser: Chrome latest

• Language: TypeScript 4.3

Current behavior: If I create a production build with the following webpack-config, the build itself succeeds, but at the app-startup I only see the error-message from above from Aurelia. When I create a dev-build this behaviour is gone. I use the latest versions of the npm-packages. I don't rewrote the whole config for the webpack-update, so maybe there's a mistake too. Does anybody has a similar problem?

Expected/desired behavior: App starts correctly.

• What is the expected behavior? App starts correctly.

• What is the motivation / use case for changing the behavior?

Webpack-Config:

// #####################################
//         DEFINITIONS
// #####################################

const path = require("path");

const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { AureliaPlugin } = require('aurelia-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const params = require("../scripts/params");
const isProduction = params.prod;

// #####################################
//         PLUGIN CONFIGURATIONS
// #####################################
const plugins = [];

plugins.push(new CopyWebpackPlugin({ patterns: [
    { from: 'content/fonts', to: '../content/fonts[path]/[name][ext]' },
    { from: 'content/images', to: '../content/images[path]/[name][ext]' },
    { from: 'content/common/robots.txt', to: '..' },
    { from: 'build/CNAME', to: '..' }
]}));

plugins.push(new webpack.DefinePlugin({
    FEATURE_NO_SVG: true,
    FEATURE_NO_UNPARSER: true
}));

plugins.push(new AureliaPlugin({
    includeAll: "app",
    viewsFor: "app/**/*.{ts,js}",
    features: {
        svg: false,
        unparser: false
    }
}));

plugins.push(new MiniCssExtractPlugin({ filename: `style.css${params.bust}` }));

plugins.push(new HtmlWebpackPlugin({
    template: './index.ejs',
    filename: "../index.html",
    inject: true
}));

plugins.push(new webpack.ProvidePlugin({
    Promise: "bluebird",
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
}));

// #####################################
//         LOADER CONFIGURATIONS
// #####################################
const cacheBustLoader = `cache-bust-loader?name=bust&value=${params.bustValue}&types=eot;woff;woff2;svg;ttf;otf;jpg;jpeg;png;ico;gif`;

const loaders = [
    { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader?url=false"] },
    { test: /\.scss/, use: [MiniCssExtractPlugin.loader, "css-loader?url=false", { loader: "sass-loader", options: { sassOptions: { includePaths: ["node_modules"] } } }] },
    { test: /\.html$/, loader: `html-loader`, options: { sources: false, esModule: false } },
    { test: /\.ts$/, use: `ts-loader`, exclude: [path.resolve("node_modules")] },
    { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, type: 'asset/inline' },
    { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, type: 'asset/inline' },
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, type: 'asset/resource' }
];

// #####################################
//         MAIN CONFIGURATION
// #####################################
module.exports = {
    target: "web",
    entry: {
        main: "aurelia-bootstrapper"
    },
    output: {
        path: path.resolve('./build/out/assets'),
        filename: `[name].js${params.bust}`,
        sourceMapFilename: `[name].map${params.bust}`,
        publicPath: "assets/"
    },
    plugins: plugins,
    resolve: {
        extensions: ['.ts', '.js'],
        modules: ["app", "node_modules"].map(x => path.resolve(x))
    },
    module: {
        rules: loaders
    },
    devtool: !isProduction ? "source-map" : undefined,
    mode: isProduction ? "production" : "development",
    watch: !isProduction,
    optimization: {
        minimizer: [
            new CssMinimizerPlugin()
        ]
    }
};

[bigopon]

Thanks for this report, it seems the GlobDependenciesPlugin isn't register the modules it finds via includeAll properly and the modules get merged/mangled/optimized by Webpack. I'll have a look

[bigopon]

This probably is fixed in latest master as well, can you @ckotzbauer help give it a go?

[ckotzbauer]

That's great @bigopon. I will test it in the evening and give feedback!

[ckotzbauer]

Thanks for this bugfix. It fixes the issue :tada: :smile: