網站搜尋

reactjs - Next-JS V14.0.2 在部署時崩潰


我剛接觸 NextJs,並且在部署我的 NextJs 應用程式時遇到了問題。我寫了一個用於提升技能的測試 NextJs 和 MongoDb 全端應用程式,它在本地運行良好,但當我將其部署到 Vercel 時會崩潰,並且在瀏覽器控制台返回兩個錯誤。我已經搜尋了許多解決方案,但仍然無法解決,請幫幫我。

這些錯誤是;

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'sqrt')
    at 155-6322358b00f50a64.js:5:13033
    at 155-6322358b00f50a64.js:5:13083
    at 54519 (155-6322358b00f50a64.js:5:13152)
    at l (webpack-dd3cd49180925084.js:1:152)
    at 44155 (155-6322358b00f50a64.js:1:14447)
    at l (webpack-dd3cd49180925084.js:1:152)
    at 18346 (676-ce2c77460caee114.js:1:36547)
    at l (webpack-dd3cd49180925084.js:1:152)
    at 15931 (page-9c9c707904a0c6d8.js:1:9713)
    at Function.l (webpack-dd3cd49180925084.js:1:152)

和

fd9d1056-614c4d273fc3bb18.js:1 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at iU (fd9d1056-614c4d273fc3bb18.js:1:117435)
    at o2 (fd9d1056-614c4d273fc3bb18.js:1:94370)
    at fd9d1056-614c4d273fc3bb18.js:1:94192
    at o1 (fd9d1056-614c4d273fc3bb18.js:1:94199)
    at oV (fd9d1056-614c4d273fc3bb18.js:1:91686)
    at oB (fd9d1056-614c4d273fc3bb18.js:1:91111)
    at MessagePort.C (472-f9c643575ba72596.js:1:101500)
iU  @   fd9d1056-614c4d273fc3bb18.js:1
o2  @   fd9d1056-614c4d273fc3bb18.js:1
(anonymous) @   fd9d1056-614c4d273fc3bb18.js:1
o1  @   fd9d1056-614c4d273fc3bb18.js:1
oV  @   fd9d1056-614c4d273fc3bb18.js:1
oB  @   fd9d1056-614c4d273fc3bb18.js:1
C   @   472-f9c643575ba72596.js:1

請,我會感激任何幫助來解決這個問題

答案#1

這個問題是由 nextjs 14 升級引起的,它與 crypto js 配合得不好,這個方法對我有效

/** @type {import('next').NextConfig} */
const nextConfig = {
  // swcMinify: false,
  transpilePackages: ['crypto-js'],
  
}

module.exports = nextConfig

通過添加這個,它修復了我的錯誤檢查,更多內容請查看這裡

答案#2

我終於能夠解決它;

我正在使用 crypto-js 庫,但它出現了一些問題,我懷疑是這個庫導致我收到 TypeError: Cannot read properties of undefined (reading 'sqrt') 錯誤,所以我尋找了一個替代庫,然後還在我的程式碼中所有類似的情況實現了這個 在存取任何物件的屬性之前,確保該物件不是 undefined。一種方法是使用 ? 運算子,例如 textObject?.property。

我也將 tsconfig.json 中的 moduleResolution 值從 bundler 改為 node

然後我刪除了 .next 資料夾、node_modules 資料夾,以及 package-lock.json 檔案,並重新安裝了所有套件