Help on how to import DatePickerElement

[larsinho81]

Hey,

thank you for providing this package!

I need guidance on how to import the DatePickerElement.

I try to import the component as
import { DatePickerElement, DatePickerElementProps } from 'react-hook-form-mui/date-pickers';

But get the following typescript error:

Cannot find module 'react-hook-form-mui/date-pickers' or its corresponding type declarations. There are types at '/Users/lars.reith/Repositories/PO2/POWebApp/node_modules/react-hook-form-mui/dist/date-pickers.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.ts(2307)

The problem can be resolved changing the module resolution strategy to node16 in tsconfig, but this is currently not an option because it brings other resolving issues to the project. We are currently using node/esnext as the module resolution strategy. And typescript 4.6.4. Should it possible to import the date / time pickers properly with this setup?

[dohomi]

hi @larsinho81 I am not sure what is the issue on your tsconfig. Can you try out folliwing patterns recommended here:
#252 (comment)

[larsinho81]

Hi @dohomi, I had a look at the comment, the only hint I can see is changing the module resolution to node16, which currently is not a direct option for our project. I have the assumption the this kind of module resolution may be a rather new feature which requires a newer module resolution version (node 16 or nodenext). But I am not sure.

[dohomi]

I use nodenext but honestly with all the different build tools its very difficult to make any comment. The best way is to spin up a codepen where the issue persist, I haven't bumped into your mentioned issue so far (using mostly ViteJS as bundler)

[larsinho81]

Yes, I will spin up a codepen when I have some time and explore a little more. Thanks!

[FDiskas]

I have the same issue if I change tsconfig.json

"module": "NodeNext",
"moduleResolution": "NodeNext",

it works, but it is not compatible with nextjs. For example then you will not be able to dynamically load components

- module was set to esnext (for dynamic import() support)
- moduleResolution was set to node (to match webpack resolution)

import dynamic from 'next/dynamic'
const MyComponent = dynamic(() =>
  import('components/MyComponent').then((mod) => mod.MyComponent)
)

Possible solution: import it directly, but this will not trigger auto import

import { DatePickerElement } from 'react-hook-form-mui/dist/date-pickers'

[gabbelobo]

I tried following @FDiskas solution of importing it directly but got the following error from Vite:

[plugin:vite:import-analysis] Missing "./dist/date-pickers" specifier in "react-hook-form-mui" package

I also can't change my moduleResolution config, so I'm unable to use DatePickerElement

[dantheother]

@gabbelobo

I also can't change my moduleResolution config, so I'm unable to use DatePickerElement

You can't just import it the normal way and live without the intellisense? For me, with moduleResolution set to "Node", and using vite, the component works if I import it like

// @ts-expect-error error TS2307: Cannot find module 'react-hook-form-mui/date-pickers' or its corresponding type declarations. There are types at 'c:/src/sda/sda.app/node_modules/react-hook-form-mui/dist/date-pickers.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'
import { DatePickerElement } from 'react-hook-form-mui/date-pickers'

The ts-expect-error is so this isn't showing up as an error. Because, it's not an error, it builds and bundles fine in our solution. We just lose the intellisense and typings for the props. Annoying, but not as annoying as trying to "fix" things to use Node16/NodeNext moduleResolution

[FDiskas]

I'm using patch-package
react-hook-form-mui+7.0.0.patch

[larsinho81]

Thanks @dantheother, so works for me as well, for now.

[dohomi]

If anybody could elaborate which setting of tsup is needed to prevent this error from happening I would appreciate. I am happy to review a PR to fix it once and for all, weirdly I've never seen it in my own environment

[FDiskas]

Everything is fine with your package, this is just us with old setups and legacy projects. https://nodejs.org/api/packages.html#package-entry-points
I can just suggest sticking with older variant untill better times come in :)

[FDiskas]

As a quick fix for the developers who have issues:

1. Try changing tsconfig.json compiler options "moduleResolution": "Bundler"

In case you need to stick to "moduleResolution": "Node" try the following:

1. Install patch-package and add prepare script npm set-script prepare "npx patch-package"
2. create a file at the root of your project patches/react-hook-form-mui+7.0.0.patch
3. Import date picker like so import { DatePickerElement } from 'react-hook-form-mui/dist/date-pickers'

Patch content

diff --git a/node_modules/react-hook-form-mui/package.json b/node_modules/react-hook-form-mui/package.json
index 6018b11..b52a7fb 100644
--- a/node_modules/react-hook-form-mui/package.json
+++ b/node_modules/react-hook-form-mui/package.json
@@ -3,33 +3,26 @@
   "license": "MIT",
   "repository": "https://github.com/dohomi/react-hook-form-mui",
   "homepage": "https://react-hook-form-material-ui.vercel.app",
-  "keywords": ["react", "mui", "material-ui", "react-hook-form"],
-  "workspaces": ["apps/*", "packages/*"],
+  "keywords": [
+    "react",
+    "mui",
+    "material-ui",
+    "react-hook-form"
+  ],
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
   "name": "react-hook-form-mui",
   "author": "Dominic Garms",
   "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/index.d.ts",
-  "files": ["dist/**", "src/**"],
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/index.js"
-    },
-    "./date-fns": {
-      "types": "./dist/date-fns.d.ts",
-      "import": "./dist/esm/date-fns.js",
-      "require": "./dist/date-fns.js"
-    },
-    "./date-pickers": {
-      "types": "./dist/date-pickers.d.ts",
-      "import": "./dist/esm/date-pickers.js",
-      "require": "./dist/date-pickers.js"
-    }
-  },
+  "files": [
+    "dist/**",
+    "src/**"
+  ],
   "engines": {
     "node": ">=14"
   },

[FDiskas]

Latest nextjs - I managed to import the date picker and not loose the lazy loading components by specifying compile options like so

"module": "esnext",
"moduleResolution": "bundler",

but I'm not sure why and what it does