useLogin is not a function

useLogin is not a function
5 Replies
kapa.ai
kapa.ai4w ago
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
kapa.ai4w ago
<@329809837338656770> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo
fascinating-indigo4w 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
kapa.ai4w 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
kapa.ai4w ago
<@329809837338656770> kapa.ai is still learning and improving, please let us know how it did by reacting below