Blitz build fails with Type error after creating new app 2.0.0-beta.34

[Ben Read]

What is the problem?

After running blitz new and blitz build the build fails.

Checked on versions:

1. Blitz 2.0.0-beta.33 & Next 13.4.5
2. Blitz 2.0.0-beta.34 & Next 13.5.4 (installed manually after blitz new)

Paste all your error logs here:

Using Formik:

   Linting and checking validity of types  .Failed to compile.

./src/core/components/Form.tsx:49:7
Type error: Type '({ handleSubmit, isSubmitting }: FormikProps<any>) => Element' is not assignable to type '(ReactNode | ((props: FormikProps<any>) => ReactNode)) & (({ handleSubmit, isSubmitting }: FormikProps<any>) => Element)'.
  Type '({ handleSubmit, isSubmitting }: FormikProps<any>) => Element' is not assignable to type 'string & (({ handleSubmit, isSubmitting }: FormikProps<any>) => Element)'.
    Type '({ handleSubmit, isSubmitting }: FormikProps<any>) => Element' is not assignable to type 'string'.

  47 |       }}
  48 |     >
> 49 |       {({ handleSubmit, isSubmitting }) => (
     |       ^
  50 |         <form onSubmit={handleSubmit} className="form" {...props}>
  51 |           {/* Form fields supplied as children are rendered here */}
  52 |           {children}

Using React Final Form or React Hook Form

   Linting and checking validity of types  ...Failed to compile.

./src/pages/404.tsx:17:8
Type error: 'ErrorComponent' cannot be used as a JSX component.
  Its instance type 'ErrorComponent<{ statusCode: 404; title: "This page could not be found"; }>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'Element' is not assignable to type 'ReactNode'.
        Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.

  15 |         </title>
  16 |       </Head>
> 17 |       <ErrorComponent statusCode={statusCode} title={title} />
     |        ^
  18 |     </>
  19 |   )
  20 | }

Paste all relevant code snippets here:

What are detailed steps to reproduce this?

1. Run blitz new app
2. Run cd app
3. For Blitz 2.0.0-beta.34, change package versions to those listed here #4237 and run yarn install
4. Run blitz build
5. See Type error

Run blitz -v and paste the output here:

Blitz version: 2.0.0-beta.34 (global)
Blitz version: 2.0.0-beta.34 (local)
Linux 5.19 | linux-x64 | Node: v18.16.1


 Package manager: npm

  System:
    OS: Linux 5.19 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
    Memory: 9.32 GB / 15.50 GB
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.1/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  npmPackages:
    @blitzjs/auth: 2.0.0-beta.34 => 2.0.0-beta.34 
    @blitzjs/next: 2.0.0-beta.34 => 2.0.0-beta.34 
    @blitzjs/rpc: 2.0.0-beta.34 => 2.0.0-beta.34 
    @prisma/client: 5.4.2 => 5.4.2 
    blitz: 2.0.0-beta.34 => 2.0.0-beta.34 
    next: 13.5.4 => 13.5.4 
    prisma: 5.4.2 => 5.4.2 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^4.8.4 => 4.9.5 

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

No response

[Ben Read]

As suggested here: https://stackoverflow.com/a/75093164

Adding this to tsconfig.json file, in compilerOptions seems to fix the error when using React Final Form or React Hook Form

    "paths": {
      "react": [ "./node_modules/@types/react" ]
    },

When using Formik there is an additional Type error:

   Linting and checking validity of types  ..Failed to compile.

./src/pages/auth/reset-password.tsx:35:13
Type error: Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

  33 |             password: "",
  34 |             passwordConfirmation: "",
> 35 |             token,
     |             ^
  36 |           }}
  37 |           onSubmit={async (values) => {
  38 |             try {

[Ben Read]

No longer a problem in v2.0.2 using React Final Form or React Hook Form.

For Formik, the original type error still exists until the react types are added to the tsconfig paths.