Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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
                Please add further details to expand on your answer, such as working code or documentation citations.
– Community
                Sep 1, 2021 at 5:55
Yesterday, I helped my friend solve this problem. She is exactly the same as what you encountered.
solution:
Delete node_modules/
Delete the package-lock.json file
Modify the dependency in package.json: "@vue/compiler-sfc": "3.0.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:
When the compiler-sfc is version 3.1.x, the dll_v1 file has been generated once,
One time add package, updated compiler-sfc to 3.2.x
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.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.