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)
沒有留言:
張貼留言