Vue 3 app broken/will not compile following package update. Zero errors prior to update.
I am receiving the following node console errors.
Errors
"export 'createElementBlock' (imported as '_createElementBlock') was not found in 'vue'
"export 'createElementVNode' (imported as '_createElementVNode') was not found in 'vue'
"export 'normalizeClass' (imported as '_normalizeClass') was not found in 'vue'
More information...
:class
throws the normalizeClass error.
Browser Error
Uncaught TypeError: Object(...) is not a function
at eval (App.vue?3dfd:2)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/App.vue?vue&type=template&id=7ba5bd90 (app.js:1091)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (App.vue?2083:1)
at Module../src/App.vue?vue&type=template&id=7ba5bd90 (app.js:1310)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (App.vue?eabf:1)
at Module../src/App.vue (app.js:1274)
package.json
"dependencies": {
"@stripe/stripe-js": "^1.17.0",
"core-js": "^3.16.1",
"date-fns": "^2.23.0",
"firebase": "^8.9.1",
"register-service-worker": "^1.7.2",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.13",
"@vue/cli-plugin-pwa": "~4.5.13",
"@vue/cli-plugin-router": "~4.5.13",
"@vue/cli-plugin-typescript": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.13",
"@vue/cli-service": "~4.5.13",
"@vue/compiler-sfc": "^3.2.2",
"sass": "^1.37.5",
"sass-loader": "^10",
"typescript": "~4.3.5"
}
Recent Upgrades
@vue/cli-plugin-babel ~4.5.0 → ~4.5.13
@vue/cli-plugin-pwa ~4.5.0 → ~4.5.13
@vue/cli-plugin-router ~4.5.0 → ~4.5.13
@vue/cli-plugin-typescript ~4.5.0 → ~4.5.13
@vue/cli-plugin-vuex ~4.5.0 → ~4.5.13
@vue/cli-service ~4.5.0 → ~4.5.13
@vue/compiler-sfc ^3.0.0 → ^3.2.2
sass ^1.26.5 → ^1.37.5
sass-loader ^8.0.2 → ^10.2.0
typescript ~4.1.5 → ~4.3.5
@stripe/stripe-js ^1.16.0 → ^1.17.0
core-js ^3.6.5 → ^3.16.1
firebase ^8.6.7 → ^8.9.1
register-service-worker ^1.7.1 → ^1.7.2
Single file components provide a very convenient approach to building JavaScript driven applications. Vue packages version mismatch error occurs when the vue and vue-template-compiler version numbers are different.
When Vue 3 update will get released? As we have already started working on vue 3, you can expect it in the october-november. Moreover, some components like datetime picker and datatable aren't developed by vuetify yet so we have temporary replacement for them and some of the features are omitted from current features.
See the error below: The main reason behind it is the version of vue and the version of vue-template-compiler are not matching. Let’s see the solution for it in the below section. solution: If you see the messages right after the error you will get some hints of how you can solve this error.
Vuetify 3 is in BETA and they are regularly working on vue 3 updates with consistency. Hence, Vuetify 3 looks promising and future-proof. Will there be a breaking change? Yes, because Vuetify 3 is a completely new framework than BootstrapVue and Vuetify 2 itself.
I resolved my issue with the following:
rm -rf node_modules/
rm package-lock.json
npm cache verify
npm i && npm up
If using sass, lock version via package.json.
"sass-loader": "^10"
.
I just found a solution, I went ahead and updated my vue 3.0.0 to 3.2.0. The warnings now doesn't show up.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With