Vue 3包更新错误

Question

Vue 3 app broken/将无法在包更新后编译。更新前零错误。

我收到以下节点控制台错误。

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

---

更多信息…

:class抛出normalizeClass错误。

浏览器错误

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

最近升级

@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

Answer 1

我用以下方法解决了我的问题:

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

---

如果使用sass，请通过package.json锁定版本。

"sass-loader": "^10".

Answer 2

我刚刚找到了一个解决方案，我继续把我的v3.0.0更新到3.2.0。警告现在不显示了

Answer 3

昨天，我帮助我的朋友解决了这个问题。她和你遇到的一模一样。解决方案:

1. 删除node_modules/
2. 删除包锁。json文件
3. 修改package中的依赖项。json:"@vue/compiler-sfc":"3.0.4"
重新安装:npm install

这个问题是由错误的"@vue/compiler-sfc"包中。我还没看具体原因。我目前使用的是3.0.4版本，后续版本将导致构建错误。所以版本被锁定在package.json中。

更新:

---

我为我的质疑@vue/compiler-sfc感到羞愧。事实上，我相信这次我找到了问题所在。应该是朋友使用的一个项目，应用了webpack的DLL技术，但由于没有锁定包版本，更新node_modules包后没有更新DLL文件，导致包索引指向错误。可能还有其他因素。总之，这个人在技术上太弱了。

关于dll配置。当包没有改变时，我们在打包时不需要重新打包那些依赖项，如vue, vue-router等。

这次的情况是:

1. 当编译器sfc是3.1版本时。x, dll_v1文件已生成一次，
2. 一次性添加包，将编译器sfc更新到3.2.x
3. 在yarn构建过程中，webpack根据dll_v1打包源代码，失败。

碰巧是朋友的同事太精明了。我猜它是从其他地方的仓库复制并更改的，所以我不知道什么是dll ?因此，不会生成新的dll_v2。

解决方案:生成一个新的dll文件，然后构建它。