webpack runtime chunk breaks global javascript

Question

I created a VueJs application which is embedded in an existing site. the existing site has its own set of javascript (bootstrap, jquery etc.) The issue is now that my runtime chunk calls the existing scripts from the site which adds for example multiple event listeners on a button instead of one.

vue.config.js

module.exports = {

    publicPath: '/b2b_platform/',

    runtimeCompiler: true,

    configureWebpack: {
        optimization: {
            runtimeChunk: { name: 'runtime' },
            splitChunks: {
                cacheGroups: {
                    'runtime-vendor': {
                        chunks: 'all',
                        name: 'vendors-node',
                        test: path.join(__dirname, 'node_modules')
                    }
                },
                minSize: 0
            }
        },
...

the runtime script which causes the issue

(function (e) {
    function r(r) {
        for (var n, l, i = r[0], a = r[1], f = r[2], c = 0, s = []; c < i.length; c++) l = i[c], Object.prototype.hasOwnProperty.call(o, l) && o[l] && s.push(o[l][0]), o[l] = 0;
        for (n in a) Object.prototype.hasOwnProperty.call(a, n) && (e[n] = a[n]);
        p && p(r);
        while (s.length) s.shift()();
        return u.push.apply(u, f || []), t()
    }

    function t() {
        for (var e, r = 0; r < u.length; r++) {
            for (var t = u[r], n = !0, i = 1; i < t.length; i++) {
                var a = t[i];
                0 !== o[a] && (n = !1)
            }
            n && (u.splice(r--, 1), e = l(l.s = t[0]))
        }
        return e
    }

    var n = {}, o = {runtime: 0}, u = [];

    function l(r) {
        if (n[r]) return n[r].exports;
        var t = n[r] = {i: r, l: !1, exports: {}};
        return e[r].call(t.exports, t, t.exports, l), t.l = !0, t.exports
    }

    l.m = e, l.c = n, l.d = function (e, r, t) {
        l.o(e, r) || Object.defineProperty(e, r, {enumerable: !0, get: t})
    }, l.r = function (e) {
        "undefined" !== typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})
    }, l.t = function (e, r) {
        if (1 & r && (e = l(e)), 8 & r) return e;
        if (4 & r && "object" === typeof e && e && e.__esModule) return e;
        var t = Object.create(null);
        if (l.r(t), Object.defineProperty(t, "default", {
            enumerable: !0,
            value: e
        }), 2 & r && "string" != typeof e) for (var n in e) l.d(t, n, function (r) {
            return e[r]
        }.bind(null, n));
        return t
    }, l.n = function (e) {
        var r = e && e.__esModule ? function () {
            return e["default"]
        } : function () {
            return e
        };
        return l.d(r, "a", r), r
    }, l.o = function (e, r) {
        return Object.prototype.hasOwnProperty.call(e, r)
    }, l.p = "/b2b_platform/";
    var i = this["webpackJsonp"] = this["webpackJsonp"] || [], a = i.push.bind(i);
    i.push = r, i = i.slice();
    for (var f = 0; f < i.length; f++) r(i[f]);
    var p = a;
    t()
})([]);
//# sourceMappingURL=runtime.js.map

everything works after removing function t() but I have no clue how to fix that

Answer 1

Yes, yes, you are absolutely right... runtimeChunk and splitChunks break Vue apps (no idea about Angular or others). Of course, webpack breaks just about everything every time, particularly when there is an upgrade, and its DSL and documentation are horrible. Optimizations are a great idea, but when they break your whole app... disable them!

This worked for me in my particular case (Rails 6.1.3.2 with @rails/[email protected], [email protected], [email protected]):

optimization: {
    runtimeChunk: false,
    splitChunks: false,
}