refinedev / refine

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
https://refine.dev
MIT License
25.92k stars 1.96k forks source link

[BUG] Property 'refineCoreProps' does not exist on type 'UseFormProps #6040

Closed borisyordanov closed 1 week ago

borisyordanov commented 2 weeks ago

Describe the bug

When attempting to extend useForm, an unexpected type error apears. TS thinks refineCoreProps is missing even though it exists in the actual variable.

Steps To Reproduce

  1. Open this devbox - https://codesandbox.io/p/devbox/l5725k?file=%2Fedit-page.tsx%3A10%2C26
  2. Inspect the type error image

Expected behavior

Entities exported by refine have unique names.

Packages

image

Additional Context

It seems that @refinedev/react-hook-form AND @refinedev/core export a type with the same name UseFormProps. Importing it from the former works, but not the latter.

aliemir commented 2 weeks ago

Hey @borisyordanov, We have UseFormProps in both @refinedev/core and @refinedev/react-hook-form. Additionally, we have useForm in both as well. The latter is an extended version of the former. If you're going to extend the one from @refinedev/react-hook-form you'll need to use the UseFormProps from that package as well.

I think I understand the confusion here, we might need to rename them to be explicit 🤔 Do you have any suggestion how we can avoid confusion here? 🙏

borisyordanov commented 2 weeks ago

@aliemir Ideally there'd be a lint rule to protect you against duplicate names, but there don't seem to be any good options.

My advice is to adopt a naming convention for each of your packages. Add a prefix or suffix to distinguish between two similar, but separate entities. Example ButtonBase and Button.

When you have decided on a convention it can be enforced with https://typescript-eslint.io/rules/naming-convention/#prefix--suffix where each one of your packages will have the rule configured differently.

The end result would be that you can safely import:

// before
import { UseFormProps } from "@refinedev/core";
import { UseFormProps } from "@refinedev/react-hook-form";

// after
import { UseFormPropsCore } from "refinedev/core";
import { UseFormPropsHookForm } from "@refinedev/react-hook-form";

I hope you'll be able to come up with a more elegant solution, but this is the best option I can think of atm.

aliemir commented 1 week ago

Hey @borisyordanov, thank you for the suggestion. We've discussed with the team and decided not to take any actions for now about the naming conventions. In the future, there may be changes related to how we export things and changes in the naming may cause issues with those.

Thank you for reporting, closing this issue for now. I'll update here and mention this issue when we have related changes planned/implemented. 🙏