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
I resolved my issue with the following:
rm -rf node_modules/rm package-lock.jsonnpm cache verifynpm i && npm upIf using sass, lock version via package.json.
"sass-loader": "^10".
Yesterday, I helped my friend solve this problem. She is exactly the same as what you encountered. solution:
This problem is caused by the wrong version of the "@vue/compiler-sfc" package. I haven't looked at the specific reason. I am currently using version 3.0.4, and a subsequent version will cause build errors. So the version is locked in package.json.
update：
I am ashamed of my questioning @vue/compiler-sfc. In fact, I believe that this time I found the problem. It should be a project used by a friend, which applied webpack's DLL technology, but because the package version was not locked, the DLL file was not updated after the node_modules package was updated, resulting in incorrect package index pointing. There may be other factors. In short, this person is too weak in technology.
About dll configuration. When the package has not changed, we do not need to repackage those dependencies such as vue, vue-router, etc. when packaging.
This time the situation is:
The colleague who happened to be a friend is too savvy. I guess it was copied from a warehouse elsewhere and changed it, so I don’t know what a dll is? Therefore, no new dll_v2 is generated.
Solution: Generate a new dll file and just build it.
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.