Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support TS moduleResolution, NodeNext #460

Closed
bestickley opened this issue Oct 28, 2022 · 9 comments · Fixed by #527
Closed

Support TS moduleResolution, NodeNext #460

bestickley opened this issue Oct 28, 2022 · 9 comments · Fixed by #527

Comments

@bestickley
Copy link

bestickley commented Oct 28, 2022

Is your feature request related to a problem? Please describe.
I get the following TS error when trying to use @hookform/resolver/zod with TS moduleResolution, NodeNext:

src/pages/UserInfo.tsx:2:29 - error TS7016: Could not find a declaration file for module '@hookform/resolvers/zod'. '/Users/stickb/Code/niwc-pac/cosmos-ui/node_modules/.pnpm/@hookform+resolvers@2.9.10_react-hook-form@7.38.0/node_modules/@hookform/resolvers/zod/dist/zod.mjs' implicitly has an 'any' type.
  Try `npm i --save-dev @types/hookform__resolvers` if it exists or add a new declaration (.d.ts) file containing `declare module '@hookform/resolvers/zod';`

2 import { zodResolver } from "@hookform/resolvers/zod";

Describe the solution you'd like
The following pnpm patch fixes this issue:

diff --git a/package.json b/package.json
index b46f9e11d988e11c89fbaf580e6bbc74502c6e7f..5bb7790760e298507138675b2f780c0cc2ec7e69 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
       "require": "./dist/resolvers.js"
     },
     "./zod": {
+      "types": "./zod/dist/index.d.ts",
       "umd": "./zod/dist/zod.umd.js",
       "import": "./zod/dist/zod.mjs",
       "require": "./zod/dist/zod.js"

Describe alternatives you've considered
I think alternatively, if zod.d.ts contained the same content as index.d.ts, then this would work automatically without the change to the package.json

Additional context
None

@bestickley
Copy link
Author

See TS docs:

The new support works similarly with import conditions. By default, TypeScript overlays the same rules with import conditions - if you write an import from an ES module, it will look up the import field, and from a CommonJS module, it will look at the require field. If it finds them, it will look for a colocated declaration file. If you need to point to a different location for your type declarations, you can add a "types" import condition.

https://www.typescriptlang.org/docs/handbook/esm-node.html#packagejson-exports-imports-and-self-referencing

@Jack-Works
Copy link

Note: your patch is actually wrong

The correct patch should be:

diff --git a/package.json b/package.json
index b46f9e11d988e11c89fbaf580e6bbc74502c6e7f..143135bd80304d991581643016799b0a0964c83b 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,14 @@
     },
     "./zod": {
       "umd": "./zod/dist/zod.umd.js",
-      "import": "./zod/dist/zod.mjs",
-      "require": "./zod/dist/zod.js"
+      "import": {
+        "types": "./zod/dist/index.d.ts",
+        "default": "./zod/dist/zod.mjs"
+      },
+      "require": {
+        "types": "./zod/dist/index.d.ts",
+        "default": "./zod/dist/zod.js"
+      }
     },
     "./yup": {
       "umd": "./yup/dist/yup.umd.js",
diff --git a/zod/dist/index.d.ts b/zod/dist/index.d.ts
index 18dffb9fef1bf09e83d9ff5e3aec325cf562c780..b55eff2beb1311c50274f7040dd88102e5858faf 100644
--- a/zod/dist/index.d.ts
+++ b/zod/dist/index.d.ts
@@ -1,2 +1,2 @@
-export * from './zod';
-export * from './types';
+export * from './zod.js';
+export * from './types.js';
diff --git a/zod/dist/zod.d.ts b/zod/dist/zod.d.ts
index 839632e3d8495c00933dada6dd9f7a7d4003311a..3ad42563f00f8fb0a6d09c7234b66653b84561fe 100644
--- a/zod/dist/zod.d.ts
+++ b/zod/dist/zod.d.ts
@@ -1,2 +1,2 @@
-import type { Resolver } from './types';
+import type { Resolver } from './types.js';
 export declare const zodResolver: Resolver;

@bestickley
Copy link
Author

@Jack-Works, it works for me, but your suggestion looks more robust. Thank you!

@arpadgabor
Copy link

This error also shows up with TypeScript 5.0's bundler module resolution.

@jorisre
Copy link
Member

jorisre commented Mar 17, 2023

Can you provide a repro example that I can clone?

@bestickley
Copy link
Author

bestickley commented Mar 17, 2023

@jorisre, https://github.com/bestickley/rhf-zod-resolver-node-next-issue
See error in editor within src/App.tsx on line 3 (import { zodResolver } from '@hookform/resolvers/zod';)

@mikecousins
Copy link

This error also shows up with TypeScript 5.0's bundler module resolution.

Ran into it this morning when we tried to switch to bundler.

@jorisre
Copy link
Member

jorisre commented Mar 17, 2023

@jorisre, https://github.com/bestickley/rhf-zod-resolver-node-next-issue See error in editor within src/App.tsx on line 3 (import { zodResolver } from '@hookform/resolvers/zod';)

Thank you! I tried with a NextJs project as well. With(out) moduleResolution: "NodeNext" and it works with the @Jack-Works 's solution.

Now, I've to check the standard in order to open a PR on https://github.com/marvinhagemeister/check-export-map.

If someone have link that document this pattern in package.json?

@jorisre
Copy link
Member

jorisre commented Mar 17, 2023

I also tried with:

"./zod": {
   "umd": "./zod/dist/zod.umd.js",
   "types": "./zod/dist/index.d.ts",
   "import": "./zod/dist/zod.mjs",
   "require": "./zod/dist/zod.js"
},

This is how Preact is doing. We'll probably do the same thing, so the check-export-map will be ok ✅

@jorisre jorisre linked a pull request Mar 17, 2023 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants