useLogin is not a function

5 Replies

Hi @PKalib. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you are encountering an issue where useLogin is not recognized as a function. This could be due to a few reasons, such as incorrect import statements or usage. Let's go through the correct way to use useLogin in a refine application. Correct Usage of useLogin 1. Importing useLogin: Make sure you are importing useLogin from @refinedev/core correctly.

   import { useLogin } from "@refinedev/core";

   import { useLogin } from "@refinedev/core";

2. Using useLogin in a Component: Here is an example of how to use useLogin in a custom login page component:

   import React from "react";
   import { useLogin, useNavigation } from "@refinedev/core";
   import { Form, Input, Button, Typography, Row, Col, AntdLayout, Card } from "@refinedev/antd";
   import "./styles.css";

   const { Text, Title } = Typography;

   export interface ILoginForm {
       email: string;
       password: string;
   }

   export const Login: React.FC = () => {
       const [form] = Form.useForm<ILoginForm>();
       const { mutate: login } = useLogin<ILoginForm>();
       const { push } = useNavigation();

       const CardTitle = (
           <Title level={3} className="title">
               Sign in your account
           </Title>
       );
return (
           <AntdLayout className="layout">
               <Row justify="center" align="middle" style={{ height: "100vh" }}>
                   <Col xs={22}>
                       <div className="container">
                           <div className="imageContainer">
                               <img src="./refine.svg" alt="Refine Logo" />
                           </div>
                           <Card title={CardTitle} headStyle={{ borderBottom: 0 }}>
                               <Form<ILoginForm>
                                   layout="vertical"
                                   form={form}
                                   onFinish={(values) => {
                                       login(values);
                                   }}
                                   initialValues={{
                                       email: "info@refine.dev",
                                       password: "refine-supabase",
                                   }}
                               >
                                   <Form.Item
                                       name="email"
                                       label="Email"
                                       rules={[{ required: true, type: "email" }]}
                                   >
                                       <Input size="large" placeholder="Email" />
                                   </Form.Item>
                                   <Form.Item
                                       name="password"
                                       label="Password"
                                       rules={[{ required: true }]}
                                       style={{ marginBottom: "12px" }}
                                   >
                                       <Input type="password" placeholder="●●●●●●●●" size="large" />
</Form.Item>
                                   <Button type="primary" size="large" htmlType="submit" block>
                                       Sign in
                                   </Button>
                               </Form>
                               <div style={{ marginTop: 8 }}>
                                   <Text style={{ fontSize: 12 }}>
                                       Don’t have an account?
                                       <a
                                           href="#"
                                           style={{ fontWeight: "bold", marginLeft: 12 }}
                                           onClick={() => push("signup")}
                                       >
                                           Sign up
                                       </a>
                                   </Text>
                               </div>
                           </Card>
                       </div>
                   </Col>
               </Row>
           </AntdLayout>
       );
   };

   import React from "react";
   import { useLogin, useNavigation } from "@refinedev/core";
   import { Form, Input, Button, Typography, Row, Col, AntdLayout, Card } from "@refinedev/antd";
   import "./styles.css";

   const { Text, Title } = Typography;

   export interface ILoginForm {
       email: string;
       password: string;
   }

   export const Login: React.FC = () => {
       const [form] = Form.useForm<ILoginForm>();
       const { mutate: login } = useLogin<ILoginForm>();
       const { push } = useNavigation();

       const CardTitle = (
           <Title level={3} className="title">
               Sign in your account
           </Title>
       );
return (
           <AntdLayout className="layout">
               <Row justify="center" align="middle" style={{ height: "100vh" }}>
                   <Col xs={22}>
                       <div className="container">
                           <div className="imageContainer">
                               <img src="./refine.svg" alt="Refine Logo" />
                           </div>
                           <Card title={CardTitle} headStyle={{ borderBottom: 0 }}>
                               <Form<ILoginForm>
                                   layout="vertical"
                                   form={form}
                                   onFinish={(values) => {
                                       login(values);
                                   }}
                                   initialValues={{
                                       email: "info@refine.dev",
                                       password: "refine-supabase",
                                   }}
                               >
                                   <Form.Item
                                       name="email"
                                       label="Email"
                                       rules={[{ required: true, type: "email" }]}
                                   >
                                       <Input size="large" placeholder="Email" />
                                   </Form.Item>
                                   <Form.Item
                                       name="password"
                                       label="Password"
                                       rules={[{ required: true }]}
                                       style={{ marginBottom: "12px" }}
                                   >
                                       <Input type="password" placeholder="●●●●●●●●" size="large" />
</Form.Item>
                                   <Button type="primary" size="large" htmlType="submit" block>
                                       Sign in
                                   </Button>
                               </Form>
                               <div style={{ marginTop: 8 }}>
                                   <Text style={{ fontSize: 12 }}>
                                       Don’t have an account?
                                       <a
                                           href="#"
                                           style={{ fontWeight: "bold", marginLeft: 12 }}
                                           onClick={() => push("signup")}
                                       >
                                           Sign up
                                       </a>
                                   </Text>
                               </div>
                           </Card>
                       </div>
                   </Col>
               </Row>
           </AntdLayout>
       );
   };

This example demonstrates how to set up a login form using useLogin from @refinedev/core. Make sure that the @refinedev/core package is installed in your project. 3. **Handling ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@329809837338656770> kapa.ai is still learning and improving, please let us know how it did by reacting below

metropolitan-bronze•4mo ago

im using nextjs ⨯ TypeError: (0 , _mantine_formWEBPACK_IMPORTED_MODULE_3.useForm) is not a function at Login (./src/app/login/page.tsx:21:72) digest: "3904641522" @kapa.ai im using nextjs ⨯ TypeError: (0 , mantineform__WEBPACK_IMPORTED_MODULE_3.useForm) is not a function at Login (./src/app/login/page.tsx:21:72) digest: "3904641522"

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It looks like you are encountering an issue where useForm from the @mantine/form library is not recognized as a function in your Next.js application. This could be due to incorrect import statements or usage. Let's go through the correct way to use useForm with Mantine in a refine application. Correct Usage of useForm with Mantine 1. Importing useForm: Make sure you are importing useForm correctly from @mantine/form.

   import { useForm } from '@mantine/form';

   import { useForm } from '@mantine/form';

2. Using useForm in a Component: Here is an example of how to use useForm in a component:

   import { Select, TextInput } from "@mantine/core";  
   import { Edit, useForm } from "@refinedev/mantine";  
   
   const PostEdit: React.FC = () => {  
     const { saveButtonProps, getInputProps } = useForm({  
       initialValues: {  
         title: "",  
         status: "",  
       },  
       validate: {  
         title: (value) => (value.length < 2 ? "Too short title" : null),  
         status: (value) => (value.length <= 0 ? "Status is required" : null),  
       },  
     });  
   
     return (  
       <Edit saveButtonProps={saveButtonProps}>  
         <form>  
           <TextInput  
             mt={8}  
             label="Title"  
             placeholder="Title"  
             withAsterisk  
             {...getInputProps("title")}  
           />  
           <Select  
             mt={8}  
             label="Status"  
             placeholder="Pick one"  
             data={[  
               { label: "Published", value: "published" },  
               { label: "Draft", value: "draft" },  
               { label: "Rejected", value: "rejected" },  
             ]}  
             withAsterisk  
             {...getInputProps("status")}  
           />  
         </form>  
       </Edit>  
     );  
   };

   import { Select, TextInput } from "@mantine/core";  
   import { Edit, useForm } from "@refinedev/mantine";  
   
   const PostEdit: React.FC = () => {  
     const { saveButtonProps, getInputProps } = useForm({  
       initialValues: {  
         title: "",  
         status: "",  
       },  
       validate: {  
         title: (value) => (value.length < 2 ? "Too short title" : null),  
         status: (value) => (value.length <= 0 ? "Status is required" : null),  
       },  
     });  
   
     return (  
       <Edit saveButtonProps={saveButtonProps}>  
         <form>  
           <TextInput  
             mt={8}  
             label="Title"  
             placeholder="Title"  
             withAsterisk  
             {...getInputProps("title")}  
           />  
           <Select  
             mt={8}  
             label="Status"  
             placeholder="Pick one"  
             data={[  
               { label: "Published", value: "published" },  
               { label: "Draft", value: "draft" },  
               { label: "Rejected", value: "rejected" },  
             ]}  
             withAsterisk  
             {...getInputProps("status")}  
           />  
         </form>  
       </Edit>  
     );  
   };

3. Running the Example Locally: You can run the example locally by using the following command:

   npm create refine-app@latest -- --example form-mantine-use-form

   npm create refine-app@latest -- --example form-mantine-use-form

4. Viewing the Example on CodeSandbox: You can also try the example on CodeSandbox: ![Open form-mantine-use-form example from refine (https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/github/refinedev/refine/tree/master/examples/form-mantine-use-form?view=preview&theme=dark&codemirror=1) By following these steps, you should be able to resolve the issue with useForm in your Next.js application. If the problem persists, ensure that all dependencies are correctly installed and up-to-date. For more detailed information, you can refer to the useForm hook documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-form/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@329809837338656770> kapa.ai is still learning and improving, please let us know how it did by reacting below