Property 'token' is missing in type 'PropsWithChildren' but required in type '{ token: string; }'.

[bemolxd]

Hey, I'm kinda stuck at 5:09:03 and im getting the following error:

Argument of type 'FunctionComponent<{ token: string; }> & { getInitialProps?(context: NextPageContext): { token: string; } | Promise<{ token: string; }>; }' is not assignable to parameter of type 'NextComponentType<PartialNextContext, {}, {}>'.
Type 'FunctionComponent<{ token: string; }> & { getInitialProps?(context: NextPageContext): { token: string; } | Promise<{ token: string; }>; }' is not assignable to type 'FunctionComponent & { getInitialProps?(context: PartialNextContext): {} | Promise<{}>; }'.
Type 'FunctionComponent<{ token: string; }> & { getInitialProps?(context: NextPageContext): { token: string; } | Promise<{ token: string; }>; }' is not assignable to type 'FunctionComponent'.
Types of parameters 'props' and 'props' are incompatible.
Type 'PropsWithChildren' is not assignable to type 'PropsWithChildren<{ token: string; }>'.
Property 'token' is missing in type 'PropsWithChildren' but required in type '{ token: string; }'.

With this piece of code:

import { Box, Button, Text } from '@chakra-ui/react';
import { Formik, Form } from 'formik';
import { NextPage } from 'next';
import { withUrqlClient } from 'next-urql';
import Image from 'next/image';
import { useRouter } from 'next/router';
import React from 'react';
import { useState } from 'react';
import { InputField } from '../../components/InputField';
import { Wrapper } from '../../components/Wrapper';
import { useChangePasswordMutation } from '../../generated/graphql';
import { createUrqlClient } from '../../utils/createUrqlClient';
import { toErrorMap } from '../../utils/toErrorMap';

const ChangePassword: NextPage<{ token: string }> = ({ token }) => {
  const router = useRouter();
  const [, changePassword] = useChangePasswordMutation();
  const [tokenErr, setTokenErr] = useState('');
  return (
    <Wrapper variant='small'>
        {/* you know that stuff */}
    </Wrapper>
  );
};

ChangePassword.getInitialProps = ({ query }) => {
  return {
    token: query.token as string,
  };
};

export default withUrqlClient(createUrqlClient)(ChangePassword);

And I really can't go further, it made so frustrated I'm out of ideas how to fix this. I know, Ben's switching to Apollo Client, but I want to follow the whole tutorial.

Thanks in advance

[GabieSB]

try:

export default withUrqlClient(createUrqlClient) (ChangePassword as any);

That worked for me

[simandebvu]

You can also use this one as TS frowns on any and if you still want the autocomplete functionality

export default withUrqlClient(createUrqlClient)(
  ChangePassword as FunctionComponent<
    PropsWithChildren<WithUrqlProps | { token: string }>
  >
);