React + TypeScriptのプロジェクトにてreact-hook-formをnpmやyarnでインストール後に、画面コンポーネントでreact-hook-formのimport記述をした後にnpm startで立ち上げようとしたら、下記のエラーが出て立ち上がらなくなった。
エラー内容
node_modules/react-hook-form/dist/types/utils.d.ts
TypeScript error in node_modules/react-hook-form/dist/types/utils.d.ts(24,77):
'?' expected. TS1005
22 | declare type TupleKey<T extends ReadonlyArray<any>> = Exclude<keyof T, keyof any[]>;
23 | declare type ArrayKey = number;
> 24 | declare type PathImpl<K extends string | number, V> = V extends Primitive ? `${K}` : `${K}` | `${K}.${Path<V>}`;
| ^
25 | export declare type Path<T> = T extends ReadonlyArray<infer V> ? IsTuple<T> extends true ? {
26 | [K in TupleKey<T>]-?: PathImpl<K & string, T[K]>;
27 | }[TupleKey<T>] : PathImpl<ArrayKey, V> : {react-hook-formのバージョン7以上を導入する場合は、TypeScriptのバージョンを4が必須となっていたがpackage.jsonに記載しているTypeScriptのバージョンが3.9.7だった。
該当プロジェクトのTypeScriptのバージョンを4以上にアップデートすることで解決します。
1. npm outdatedコマンドでアップデート情報を確認
> npm outdated
npm outdated
Package Current Wanted Latest Location
@testing-library/jest-dom 5.11.3 5.11.10 5.14.1 mirroring-staff-app
@testing-library/react 10.4.8 10.4.9 12.0.0 mirroring-staff-app
@testing-library/user-event 12.1.1 12.1.10 13.2.1 mirroring-staff-app
@types/jest 26.0.9 26.0.24 27.0.1 mirroring-staff-app
@types/node 14.0.27 14.0.27 16.6.1 mirroring-staff-app
@types/react 16.9.46 16.9.56 17.0.17 mirroring-staff-app
@types/react-dom 16.9.8 16.9.14 17.0.9 mirroring-staff-app
@types/react-redux 7.1.9 7.1.18 7.1.18 mirroring-staff-app
@types/react-router-dom 5.1.5 5.1.8 5.1.8 mirroring-staff-app
node-sass 4.14.1 4.14.1 6.0.1 mirroring-staff-app
react 16.13.1 16.13.1 17.0.2 mirroring-staff-app
react-dom 16.13.1 16.13.1 17.0.2 mirroring-staff-app
react-redux 7.2.1 7.2.4 7.2.4 mirroring-staff-app
react-scripts 3.4.2 3.4.4 4.0.3 mirroring-staff-app
redux 4.0.5 4.0.5 4.1.1 mirroring-staff-app
typescript 3.9.7 3.9.10 4.3.5 mirroring-staff-appTypeScriptの最新バージョンは4.3.5ということが確認できた
2. TypeScriptモジュールのアップデート
> npm install typescript@4.3.53. アップデートされたTypeScriptのバージョンを確認
npm outdatedコマンドはアップデートが存在する候補しか表示されないので、プロジェクト内のpackage.jsonファイルを確認します。
package.json
"dependencies": {
"@testing-library/jest-dom": "~5.11.3",
"@testing-library/react": "~10.4.8",
"@testing-library/user-event": "~12.1.1",
"@types/jest": "~26.0.9",
"@types/node": "~14.0.27",
"@types/react": "~16.9.46",
"@types/react-dom": "~16.9.8",
"@types/react-redux": "~7.1.9",
"@types/react-router-dom": "~5.1.5",
"@types/react-select": "^4.0.17",
"axios": "^0.21.1",
"node-sass": "^4.14.1",
"react": "~16.13.1",
"react-dom": "~16.13.1",
"react-hook-form": "^7.12.2",
"react-native-jssip": "^3.7.6",
"react-redux": "~7.2.1",
"react-router-config": "~5.1.1",
"react-router-dom": "~5.2.0",
"react-scripts": "~3.4.2",
"react-scripts-ts": "~3.1.0",
"react-select": "^4.3.1",
"redux": "~4.0.5",
"typescript": "^4.3.5"
},上記の手順でTypeScriptのバージョンを上げた後にnpm startでプロジェクトを動作すると問題なく動きました。
