13

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
Ryan Prentiss
  • 1,492
  • 2
  • 25
  • 46

3 Answers3

12

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".

Ryan Prentiss
  • 1,492
  • 2
  • 25
  • 46
4

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.

Leindfraust
  • 41
  • 1
  • 1
    Please add further details to expand on your answer, such as working code or documentation citations. – Community Sep 01 '21 at 05:55
0

Yesterday, I helped my friend solve this problem. She is exactly the same as what you encountered. solution:

  1. Delete node_modules/
  2. Delete the package-lock.json file
  3. Modify the dependency in package.json: "@vue/compiler-sfc": "3.0.4"
  4. Reinstall it: npm install

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:

  1. When the compiler-sfc is version 3.1.x, the dll_v1 file has been generated once,
  2. One time add package, updated compiler-sfc to 3.2.x
  3. During yarn build, webpack packaged the source code according to dll_v1, which failed.

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.

Bran
  • 1
  • 1