🐛 [BUG] - 清除所有 compile warning

TzuHanLiang commented 2 months ago

Searched for similar issues

[X] YES, I have searched for similar issues.

Time of occurrence

Today 9:00 AM

Device

None

Other Device

No response

Device Version

No response

OS

macOS

OS Version

No response

Browsers

No response

Other Browser

No response

Browser Version

No response

Reproduction URL

-

Reproduction steps

1. git clone 'https://github.com/CAFECA-IO/iSunFA.git'
2. git fetch origin develop:develop
3. git checkout develop
4. 'npm i'
5. 'npm run dev'
6. See warning

Current Result

Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering
    at title
    at head
    at Head (webpack-internal:///./node_modules/next/dist/pages/_document.js:308:1)
    at html
    at Html (webpack-internal:///./node_modules/next/dist/pages/_document.js:782:132)
    at Document

(node:83496) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
    at node:punycode:3:9
    at BuiltinModule.compileForInternalLoader (node:internal/bootstrap/realm:398:7)
    at BuiltinModule.compileForPublicLoader (node:internal/bootstrap/realm:337:10)
    at loadBuiltinModule (node:internal/modules/helpers:96:7)
    at Module._load (node:internal/modules/cjs/loader:1063:17)
    at wrapModuleLoad (node:internal/modules/cjs/loader:212:19)
    at Module.require (node:internal/modules/cjs/loader:1297:12)
    at mod.require (/Users/tzuhanliang/workspace/iSunFA/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:123:16)
    at Object.<anonymous> (/Users/tzuhanliang/workspace/iSunFA/node_modules/node-fetch/node_modules/whatwg-url/lib/url-state-machine.js:2:18)
    at Module._compile (node:internal/modules/cjs/loader:1460:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1544:10)
    at Module.load (node:internal/modules/cjs/loader:1275:32)
    at Module._load (node:internal/modules/cjs/loader:1091:12)
    at wrapModuleLoad (node:internal/modules/cjs/loader:212:19)

(base) tzuhanliang@TZUHANde-MacBook-Pro iSunFA % npm install
npm warn deprecated @types/react-chartjs-2@2.5.7: This is a stub types definition for react-chartjs-2 (https://github.com/gor181/react-chartjs-2). react-chartjs-2 provides its own type definitions, so you don't need @types/react-chartjs-2 installed!
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated npmlog@5.0.1: This package is no longer supported.
npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm warn deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated are-we-there-yet@2.0.0: This package is no longer supported.
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated glob@7.1.7: Glob versions prior to v9 are no longer supported
npm warn deprecated domexception@4.0.0: Use your platform's native DOMException instead
npm warn deprecated gauge@3.0.2: This package is no longer supported.

Screenshots

![Uploading Screenshot 2024-08-20 at 9.46.24 AM.png…]()

Logs

No response

Expected Result

without this sentance 'react-i18next:: You will need to pass in an i18next instance by using initReactI18next'

TzuHanLiang commented 2 months ago

npm ls inflight npmlog @humanwhocodes/config-array @humanwhocodes/object-schema abab rimraf are-we-there-yet glob domexception gauge punycode

TzuHanLiang commented 2 months ago

針對「react-i18next:: You will need to pass in an i18next instance by using initReactI18next」可以解決的辦法：

將所有的 getStaticProps 改成getServerSideProps。
- getStaticProps 是在建置時運行的，因此它產生的頁面是靜態的。在這個過程中，i18next 實例可能無法正確初始化，尤其是當你需要在執行時間動態載入或設定 i18next 時。
- getServerSideProps 是在每次請求時運行的，這意味著它可以在服務端動態初始化和配置 i18next 實例，並將其傳遞給頁面元件，從而避免在靜態生成時出現的問題。
side effect：
- 儘管有react-i18next:: You will need to pass in an i18next instance by using initReactI18next但頁面的翻譯功能都正常，將所有的 getStaticProps 改為 getServerSideProps 會增加頁面生成的靈活性，確保資料的即時性，但同時也會帶來性能上的開銷，增加伺服器負載，並可能影響 SEO 表現。

TzuHanLiang commented 2 months ago

punycode 還未解決 took 3hrs

TzuHanLiang commented 2 months ago

更新 husky 從 v4 更新至 v9 doc

TzuHanLiang commented 2 months ago

過期的 packages

暫不更新的原因

原因 1: 版本相容性問題

@typescript-eslint/eslint-plugin 和 @typescript-eslint/parser：這兩個套件目前的版本是 7.18.0，它們與 eslint@8.x 相容，但不支持 eslint@9.x。如果嘗試升級這兩個套件到 8.2.0 版本，它們的相依性會要求使用 eslint@9.x，但目前的 eslint-config-airbnb 和其他相關配置不支持 eslint@9.x，因此無法升級。

原因 2: `eslint-config-airbnb` 的限制

eslint-config-airbnb：這個套件目前的版本是 19.0.4，它支持的 ESLint 版本範圍是 ^7.32.0 || ^8.2.0，但不支持 eslint@9.x。如果你升級 ESLint 到 9.x 版本，這個配置將無法正常工作，導致 ESLint 相關的檢查失效或出錯。

原因 3: 相依性衝突

相依性衝突：升級 ESLint 到 9.x 版本將引發與現有 @typescript-eslint 插件和解析器的相依性衝突，這些衝突會導致無法解析或安裝相應的套件，並且可能會破壞整個 ESLint 配置的運作。除非所有相關套件都支持 ESLint 9.x，否則這些套件的升級都會失敗。

總結

目前，升級這三個套件會導致相依性衝突和相容性問題。為了保持系統穩定，你應該繼續使用與這些套件相容的 ESLint 版本（如 8.x），並等待相關套件的更新來支持 ESLint 9.x。

我們使用的 packages 依賴一下已經 deprecated 的 packages

1. `inflight@1.0.6`

警告：這個模組不再被支持，並且存在內存泄漏的風險。建議使用 lru-cache 作為替代方案。
上層模組：
- jest-environment-jsdom: 這個模組通過 glob@7.2.3 依賴於 inflight。
- jest: jest 通過多個模組（如 @jest/core 和 @jest/reporters）依賴於 glob@7.2.3，進而依賴 inflight。
暫時不更新的原因：此模組是上層依賴自動安裝的，無法單獨更新或移除，除非相關依賴發布更新。

2. `npmlog@5.0.1`

警告：這個包已經不再被支持。
上層模組：
- canvas: 這個模組通過 @mapbox/node-pre-gyp 依賴 npmlog。
暫時不更新的原因：npmlog 是由上層依賴自動安裝的，無法單獨升級。

3. `@humanwhocodes/config-array@0.11.14` 和 `@humanwhocodes/object-schema@2.0.3`

警告：建議使用新版本的 @eslint/config-array 和 @eslint/object-schema 來替代這些模組。
上層模組：
- eslint@8.57.0: 這些模組是 ESLint 的依賴項，用於配置管理。
暫時不更新的原因：這些模組被 ESLint 使用，更新可能會引起相容性問題，並且需要等待 ESLint 更新。

4. `abab@2.0.6`

警告：建議使用平台的原生 atob() 和 btoa() 方法來替代這個模組。
上層模組：
- jsdom@20.0.3: jsdom 通過 data-urls 和 whatwg-url 依賴 abab。
暫時不更新的原因：這是由 jsdom 依賴的子模組，無法單獨更新。

5. `rimraf@3.0.2`

警告：建議升級到 rimraf@4.x 版本。
上層模組：
- file-entry-cache: 這個模組通過 flat-cache 依賴 rimraf。
- jest-environment-jsdom: 這個模組通過 canvas 和 @mapbox/node-pre-gyp 依賴 rimraf。
暫時不更新的原因：此版本是上層依賴自動安裝，無法單獨升級。

6. `are-we-there-yet@2.0.0`

警告：這個包已經不再被支持。
上層模組：
- npmlog: are-we-there-yet 是 npmlog 的一個子依賴，間接被 canvas 所使用。
暫時不更新的原因：這是由 npmlog 依賴的子模組，無法單獨更新。

7. `glob@7.2.3`

警告：建議升級到 glob@9 或更高版本。
上層模組：
- eslint@8.57.0: 這個模組通過多個子依賴如 file-entry-cache 使用 glob。
- jest-environment-jsdom: 這個模組通過 jest 使用 glob。
- jest: jest 的多個模組依賴於 glob 的舊版本。
暫時不更新的原因：glob 被多個上層依賴（如 jest、eslint 等）自動安裝，無法單獨升級。

8. `domexception@4.0.0`

警告：建議使用平台的原生 DOMException 來替代這個模組。
上層模組：
- jsdom@20.0.3: 這個模組是由 jsdom 自動安裝的，無法單獨升級。
暫時不更新的原因：這個模組是 jsdom 依賴的子模組，無法單獨更新。

9. `gauge@3.0.2`

警告：這個包已經不再被支持。
上層模組：
- npmlog: gauge 是 npmlog 的一個子依賴，間接被 canvas 所使用。
暫時不更新的原因：這是由 npmlog 依賴的子模組，無法單獨更新。

總結

這些警告主要來自於已棄用的套件，而這些套件大部分都是通過其他上層依賴自動安裝的，因此我們無法單獨更新它們。要解決這些問題，通常需要等待上層依賴更新並移除或替換這些已棄用的子依賴。

TzuHanLiang commented 2 months ago

took 3.5hrs done

CAFECA-IO / iSunFA