Error: Uncaught (in promise) TypeError: n.swapComponent is not a function

Question

I am developing an application using Laravel with Jetsream and the Vuejs & Inertia stack and am getting a blank page across my application after running npm audit fix.

I ran the npm command npm audit fix after receiving a message that there were 3 high severity vulnerabilities. This was the output:

npm WARN deprecated [email protected]: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
npm WARN @inertiajs/[email protected] requires a peer of @inertiajs/inertia@^0.2.0 || ^0.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
+ @inertiajs/[email protected]
added 4 packages from 5 contributors and updated 2 packages in 4.307s

55 packages are looking for funding
  run `npm fund` for details

fixed 2 of 3 vulnerabilities in 1150 scanned packages
  1 vulnerability required manual review and could not be updated

Since running that command, every page on the site is blank and has the following error showing in the console:

app.js:121 Uncaught (in promise) TypeError: n.swapComponent is not a function
    at app.js:121
(anonymous) @ app.js:121
Promise.then (async)
setPage @ app.js:121
handleInitialPageVisit @ app.js:121
init @ app.js:121
created @ app.js:108
invokeWithErrorHandling @ app.js:104023
callHook @ app.js:106380
Vue._init @ app.js:107162
VueComponent @ app.js:107307
createComponentInstanceForVnode @ app.js:105450
init @ app.js:105281
createComponent @ app.js:108133
createElm @ app.js:108080
patch @ app.js:108669
Vue._update @ app.js:106106
updateComponent @ app.js:106227
get @ app.js:106638
Watcher @ app.js:106627
mountComponent @ app.js:106234
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:111204
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:114104
./resources/js/app.js @ app.js:120619
__webpack_require__ @ app.js:20
0 @ app.js:120679
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87

I am new to laravel/this stack and any help tracking down the source of this issue would be appreciated.

Answer 1

I am facing the same issue when I upgraded

from:

"@inertiajs/inertia": "^0.1.9",

to

"@inertiajs/inertia": "^0.8.2",

Since it was suggested by GitHub security audit, so for now I just revert back to ^0.1.9