TL;DR – how to narrow place with error when there is infinite recursion during creation of new Vue element / component, but it happens only when certain condition is satisfied – when built JS file is minified?

I struggle with embedding custom Typescript & Vue 2 app as Shopify extension. This Vue app is distributed as npm ready package, it executes 100% in the browser, no external hosting is used.

The flow is:
Browser page (Shopify page) -> Shopify extension -> vue-middleware.js -> Vue app.

Vue app is build by Webpack 5.61.0. Then JS output from Webpack is used in build process of vue-middleware.js, which is another project. This time latest Vite is used to built JS file which is used by Shopify extension.

vue-middleware.js calls appropriate, exported functions from Vue app. Middleware is added to a Shopify extension as a deferred . Rest is a Shopify magic.

All steps are done under Node v18.20.3.

Problem is – When Vue app is minified, it breaks within Shopify with RangeError. I used a Chrome DevTools profiler, there is a infinite recursion when Vue does something with the DOM / creates new elements, look at the screenshot:
link

Funny thing is – Vue app always works fine when embedded into simple HTML page, even works within Shopify if Vue app is not minified! Recursion happens only when Vue app is minified and then executed within Shopify.

What is the real cause of this RangeError and where should I search in code to resolve this bug?

I changed webpack-terser-plugin to make it less aggresive:

new TerserPlugin({
    terserOptions: {
        compress: {
            sequences: 2
        }
    },
}),

Then I tried uglify-js as a minifier, by calling it on the compiled JS:
uglifyjs output.js --compress -o output.js

Same RangeError, but with more readable stacktrace, which you see on the screenshot above.
Then I turned off minification and app worked fine, but it is few megabytes bigger, what is unacceptable.