2023/03/19

[TypeScript] 解決 Webpack v4 升級到 v5 遇到 tsc 編譯時出現 Cannot find name 'Map'

### 問題 繼上編解決在 webpack v4 的安全性相依成功升級後。接下的任務是進一步將 webpack 的版本由 v4 升到 v5。 升級前環境: ```json "devDependencies": { "@types/node": "^16.0.0", "ts-loader": "^8.4.0", "typescript": "^5.0.2", "webpack": "^4.46.0", "webpack-cli": "^4.10.0" } ``` 把 webpack 及 webpack-cli 升級到 5.x,並同步升級 ts-loader 至 9.x 版本 執行 tsc 時出現 Cannot find name 'Map' 的問題
### 解決方法 除了更新 webpack, webpack-cli, ts-loader 的版本外 也要一併更新 `@type/node` 的版本 ``` npm install -D @types/node ``` 修改 `tsconfig.json` 加上 typeRoots 的位置 ``` "typeRoots": [ "node_modules/@types" ], ``` 升級後環境: ```json "devDependencies": { "@types/node": "^16.18.16", "ts-loader": "^9.4.2", "typescript": "^5.0.2", "webpack": "^5.76.2", "webpack-cli": "^5.0.1" }, ``` ### 後記 其實在這專案的底下還有一組是用 Typescript 2.x 的版本做編譯,但暫時未能同步升級,卻用不同的 Typescript 的版本,不特別指定會是以主目錄下的 `node_modules/@type` 為目標。所以兩個都直接指定各自的 typeRoots 就可以順利通過編譯。總算也把開發的相依套件版本全都升級完成。 ### 參考連結 - [Typescript compiler: Cannot find name 'Map'](https://stackoverflow.com/questions/52468096/typescript-compiler-cannot-find-name-map)

沒有留言: