Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue 3 Package Update Errors

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
like image 316
Ryan Prentiss Avatar asked Aug 15 '21 23:08

Ryan Prentiss


People also ask

What is Vue package version mismatch?

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 will Vue 3 update be released?

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.

Why Vue-template-compiler is not matching my version?

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.

Will there be a breaking change in vuetify 3?

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.


Video Answer


2 Answers

I resolved my issue with the following:

  1. rm -rf node_modules/
  2. rm package-lock.json
  3. npm cache verify
  4. npm i && npm up

If using sass, lock version via package.json.

"sass-loader": "^10".

like image 86
Ryan Prentiss Avatar answered Oct 23 '22 18:10

Ryan Prentiss


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.

like image 30
Leindfraust Avatar answered Oct 23 '22 20:10

Leindfraust