dohomi/react-hook-form-mui

v7 is out

Opened this issue ยท 6 comments

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Summary ๐Ÿ’ก

I released a new v7 beta with following breaking changes:

  • All '@mui/x-date-pickers' components are exported at react-hook-form-mui/date-pickers
  • @mui/x-date-pickers minimal version is raised to v7
  • react-hook-form-mui/date-fns is using v3 of date-fns
  • remove validation alias and use rules prop of react-hook-form

The changed export of date-pickers hopefully reduces bundle size of integrations where a date picker is not part of the forms.

In v6 there was an inconsistency on how to add validation rules, some component used a validation prop, some the rules prop. The validation prop is removed in all components and now the rules prop is used.

Examples ๐ŸŒˆ

// before:
import {DatePickerElement} from 'react-hook-form-mui'

// after: moved all pickers to its own exported member
import {DatePickerElement} from 'react-hook-form-mui/date-pickers'

// before:
<TextFieldElement validation={{required: 'This field is required'}}/>

// after: removed the validation prop and replaced it with rules
<TextFieldElement rules={{required: 'This field is required'}} />

I can't import the DatePickerElement. Not sure if I'm doing something wrong?

image

Attached an example project using npm create vite@latest to create a default React project.

test-mui-hook.zip

can you upgrade to beta.3? Also make sure if you use ts to maybe change your tsconfig.json to moduleResolution: node16 | NodeNext

@dohomi Thanks upgrading to beta.3 resolved the issue. I didn't have to adjust the moduleResolution from its default value.

great, thanks for confirming ๐Ÿ‘

can you upgrade to beta.3? Also make sure if you use ts to maybe change your tsconfig.json to moduleResolution: node16 | NodeNext

None of those help me.
This is my original tsconfig

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noUncheckedIndexedAccess": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": ["src", "test"]
}

I have been using this package for last couple of days in v7 but it has been only nightmare and frustration, along other bugs/issues. So many hours wasted.
Unfortunately I recently upgraded MUI-X datepicker to v7 and i dont plan to go back to v6.

Please fix imports ASAP. For now i guess I will have to go with react-hook-form only.

with words like ASAP you won't move me anywhere - this is public code and nobody got paid to provide the codebase. You even didn't create a Codepen with your issue so what am I supposed to look into? Its obvious that there is an issue relies in your installation and package integration and your comment is zero help to identify what the issue might be.