unexpected LabeledTextField.tsx

[Vandivier]

What is the problem?

LabeledTextField.tsx is in an unexpected form out of the box (alpha 0.59) for two reasons:

1. With TypeScript enabled, it fails the pre-push husky hook by default due to issues shown in the "Paste all your error logs" section
2. although I picked react-hook-form to start a new blitz app with, this file says import { useField } from "react-final-form"

Paste all your error logs here:

John Vandivier@DESKTOP-MMSRKCH MINGW64 /d/workspace/github/kahneman (main)
$ git push
app/core/components/LabeledTextField.tsx:22:9 - error TS2532: Object is possibly 'undefined'.

22       ? errors[name].join(", ")
           ~~~~~~~~~~~~

app/core/components/LabeledTextField.tsx:22:9 - error TS2722: Cannot invoke an object which is possibly 'undefined'.

22       ? errors[name].join(", ")
           ~~~~~~~~~~~~~~~~~

app/core/components/LabeledTextField.tsx:22:22 - error TS2349: This expression is not callable.
  Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>' has no call signatures.

22       ? errors[name].join(", ")
                        ~~~~


Found 3 errors in the same file, starting at: app/core/components/LabeledTextField.tsx:22

husky - pre-push hook exited with code 1 (error)
error: failed to push some refs to 'https://github.com/Vandivier/kahneman.git'

Paste all relevant code snippets here:

PASTE_HERE (leave the ``` marks)

What are detailed steps to reproduce this?

Run blitz -v and paste the output here:

Loaded env from D:\workspace\github\kahneman\.env.local
Loaded env from D:\workspace\github\kahneman\.env
Blitz version: 2.0.0-alpha.59 (global)
Blitz version: 2.0.0-alpha.59 (local)
Windows 10 | win32-x64 | Node: v16.2.0


 Package manager: npm

  System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz
    Memory: 8.63 GB / 19.86 GB
  Binaries:
    Node: 16.2.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.20.6 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @blitzjs/auth: alpha => 2.0.0-alpha.59
    @blitzjs/next: alpha => 2.0.0-alpha.59
    @blitzjs/rpc: alpha => 2.0.0-alpha.59
    @prisma/client: 4.0.0 => 4.0.0
    blitz: 2.0.0-alpha.59 => 2.0.0-alpha.59
    next: 12.2.0 => 12.2.0
    prisma: 4.0.0 => 4.0.0
    react: 18.0.0 => 18.0.0
    react-dom: 18.0.0 => 18.0.0
    typescript: ^4.5.3 => 4.7.4

Please include below any other applicable logs and screenshots that show your problem:

No response

[Vandivier]

while trying to manually fix the type incompatibility, I receive:

Conversion of type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>> | undefined' to type 'any[]' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

so I guess errors[name] should never be an array?

this silences the linter although it's not really desirable: const error = Array.isArray(errors[name]) ? (errors[name] as any).join(', ') : errors[name]?.message || errors[name];

[beerose]

I just tried creating a new blitz app with react-hook-form to see if we use the correct templates, and it worked fine. I.e., I don't see that second issue that you mentioned. Regarding the first one — I belive that it can be related to wrongly generated forms code. Can you make sure that you use this code: https://github.com/blitz-js/blitz/blob/e218d5f84ddf001d1b7154a3828a15969a21d0fa/packages/generator/templates/app/_forms/hookform/LabeledTextField.tsx and see if that helps?

[flybayer]

closing for inactivity, feel free to comment if this is still an issue

[carlreid]

closing for inactivity, feel free to comment if this is still an issue

I just hit the same thing, so there must be an issue somewhere. Just not sure where! I also tried to (errors[name] as Array<any>).map(error => error.message).join(", ") but receive the same Conversion of type 'FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined' to type 'any[]' may be a mistake because neither type sufficiently overlaps with the other

My generated code does match https://github.com/blitz-js/blitz/blob/main/packages/generator/templates/app/_forms/hookform/LabeledTextField.tsx too, so it can't be that?

[flybayer]

@dillonraphael 👆