Error when loading vue on a webpage that uses webpack 3

I have a webpage and I want to mount multiple vue apps in different divs

I simply include the vue scripts on my webpage and then mount the vue apps at some point

When I use the dev build (app.js), it works fine. But when I use the prod build (chunk-vendors.js, app.js), I get this error

chunk-vendors.js:1 Uncaught TypeError: (intermediate value)(intermediate value).push is not a function
    at chunk-vendors.js:1
(anonymous) @ chunk-vendors.js:1
bootstrap:141 Uncaught TypeError: Cannot read property 'bind' of undefined
    at bootstrap:141
    at bootstrap:151

2018-11-17_16-55

My page uses webpack 3.10.0

Any help is much appreciated, Iā€™m quite stuck with this one
I even switched the order of the two scripts, but with no luck

Edit
When I put vue scripts before any other scripts using webpack 3, I get this error instead

Uncaught TypeError: parentJsonpFunction is not a function
    at window.webpackJsonp (bootstrap 228e47ad5b7283b931ed:19)
    at dsn-products-extra.js:26
window.webpackJsonp @ bootstrap 228e47ad5b7283b931ed:19
(anonymous) @ dsn-products-extra.js:26
bootstrap 228e47ad5b7283b931ed:19 Uncaught TypeError: parentJsonpFunction is not a function
    at window.webpackJsonp (bootstrap 228e47ad5b7283b931ed:19)
    at dsn-products-list.js:26

Edit
I found related/similar issues, so this is an issue with webpack 3 & 4, not with vuejs


Solution for now
I had to disable code splitting in vue.config.js and it worked fine

chainWebpack: config => { 
  config.optimization.delete('splitChunks') 
}
2 Likes