horprogs / Just-validate

Modern, simple, lightweight (~5kb gzip) form validation library written in Typescript, with no dependencies (no JQuery!). Support a wide range of predefined rules, async, files, dates validation, custom error messages and styles, localization. Support writing custom rules and plugins.
https://just-validate.dev/
Other
522 stars 91 forks source link

ESLint TS7016 #120

Open TFuriosiITDM opened 1 year ago

TFuriosiITDM commented 1 year ago

Describe the bug I'm using just-validate inside a Vite React Typescript project. The library works well and the code compiles successfully but i see this annoying error message from ESLint:

TS7016: Could not find a declaration file for module 'just-validate'. 'node_modules/just-validate/dist/just-validate.es.js' implicitly has an 'any' type.   There are types at 'node_modules/just-validate/dist/main.d.ts', but this result could not be resolved when respecting package.json "exports". The 'just-validate' library may need to update its package.json or typings.

Is there any way to fix it?

To Reproduce

npm install just-validate
import { Rules } from 'just-validate';
// here i see the warning...

Expected behavior No error or warnings.

My package.json

{
  "name": "project-name",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "bootstrap-italia": "^2.4.0",
    "i18next": "^22.4.15",
    "i18next-http-backend": "^2.2.0",
    "just-validate": "^4.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^12.2.2",
    "react-router-dom": "^6.11.1",
    "rxjs": "^7.8.1"
  },
  "devDependencies": {
    "@types/node": "^18.16.2",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.39.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "eslint-plugin-unused-imports": "^2.0.0",
    "prettier": "^2.8.8",
    "typescript": "^5.0.2",
    "vite": "^4.3.2",
    "vite-plugin-eslint": "^1.8.1"
  }
}
horprogs commented 1 year ago

I believe this is related to TypeScript 5, this is a new major version that has been released a couple months ago and I will need to check and adjust types for JustValidate

andersbc commented 7 months ago

There is a general discussion of the topic here: https://github.com/microsoft/TypeScript/issues/52363

One of the Microsoft typescript contributors made this little tool that might help to see what the problem is: https://arethetypeswrong.github.io/?p=just-validate%404.3.0

Temporary fix

Digging in the typescript thread I found a patch solution to the problem, using the patch-package npm package. You fix the problem by editing the problem package (in this case just-validate) directly in your node-modules. patch-package can then diff the changes against the original package and apply a patch that should be robust for reinstalls.

These 4 steps removed the problem and gave me correct types for just-validate:

Install patch-package into the root of your project

npm i -D patch-package

Add this line to your package.json's scripts section

  "scripts": {
    "postinstall": "patch-package"
  },

Navigate to node_modules/just-validate/package.json and remove these lines:

"exports": {
    ".": {
      "import": "./dist/just-validate.es.js",
      "require": "./dist/just-validate.production.min.js"
    }
  },

Run this in the root of your project to create the patch:

npx patch-package just-validate --exclude "nothing"

(the --exclude "nothing" makes sure patch-package also takes changes in package.json into account)

This creates a patches directory in your project root and fixes the problem. At least on my machine.