CODEWITHSUNDEEP
reactjstypescriptreact-hook-form
Sabbir Ahmed
Sabbir Ahmed

Reputation: 1704

Error in building app with react-hook-form using TS

I get the following error when I try to build my react app using react-hook-form in TS:

node_modules/react-hook-form/dist/types/utils.d.ts:24:77 - error TS1005: '?' expected.

24 declare type PathImpl<K extends string | number, V> = V extends Primitive ? `${K}` : `${K}` | `${K}.${Path<V>}`;
                                                                               ~~~

node_modules/react-hook-form/dist/types/utils.d.ts:24:84 - error TS1005: ';' expected.

24 declare type PathImpl<K extends string | number, V> = V extends Primitive ? `${K}` : `${K}` | `${K}.${Path<V>}`;
                                                                                      ~

node_modules/react-hook-form/dist/types/utils.d.ts:24:110 - error TS1005: '(' expected.

24 declare type PathImpl<K extends string | number, V> = V extends Primitive ? `${K}` : `${K}` | `${K}.${Path<V>}`;

And here's my build command:

yarn tsc --emitDeclarationOnly && tsc-alias -p tsconfig.json

Here's my tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "jsx": "react",
    "declaration": true,
    "outDir": "dist",
    "rootDir": "src",
    "downlevelIteration": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "noEmit": false,
    "baseUrl": "./src",
    "paths": {
      "@context/*": [
        "context/*"
      ],
      "@types": [
        "types/index.ts"
      ]
    }
  },
  "include": [
    "src/**/*",
  ],
  "exclude": [
    "node_modules/",
    "./src/**/*.stories.tsx",
    "./src/**/*.test.tsx",
    "./src/**/__mocks__/**/*"
  ]
}

I'm using react-hook-form version 7.6.6. Any suggestion on how to fix this would be much appreciated!

Upvotes: 6

Views: 4471

Answers (2)

CodingYourLife
CodingYourLife

Reputation: 8588

As @nathaniaelvina pointed out check your package.json if you have a typescript version bellow v4.

If typescript is bellow v4 run the following:

npm i [email protected]

where 4.5.4 is the latest version from https://www.npmjs.com/package/typescript

Note that after the typescript update there might be some changes needed to get it compiling again.

Upvotes: 1

nathaniaelvina
nathaniaelvina

Reputation: 131

According to this discussion, react-hook-form v7 needs TS 4.1 above

Upvotes: 13

Related Questions