eduardoborges / use-mask-input

✏️ A react Hook for build elegant input masks. Compatible with React Hook Form
https://npmjs.com/package/use-mask-input
333 stars 19 forks source link

Failed to resolve entry for package. #8

Closed zkanda closed 1 year ago

zkanda commented 1 year ago

I get this error whenever I tries this package. Any hint on this one?

11:17:53 AM [vite] Internal server error: Failed to resolve entry for package "use-mask-input". The package may have incorrect main/module/exports specified in its package.json.

To reproduce:

npm create vite@latest my-react-app -- --template react-ts
npm install react-hook-form use-mask-input 

Create a test file, say Hello.tsx

import { useForm } from "react-hook-form";
import { withHookFormMask } from "use-mask-input";

export default function Hello() {
  const { register, control, watch } = useForm({
    defaultValues: {
      phone: "",
    },
  });
  const onSubmit = (data: any) => {
    console.log(data);
  };
  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        {...withHookFormMask(register("phone"), [
          "(99) 9999 9999",
          "(99) 9 9999 9999",
        ])}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
eduardoborges commented 1 year ago

I will investigate this.

z1m1n commented 1 year ago

I have similar issue:

Field 'browser' doesn't contain a valid alias configuration image

Last working version is 3.0.0

eduardoborges commented 1 year ago

:tada: This issue has been resolved in version 3.0.4 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

eduardoborges commented 1 year ago

Hey @z1m1n & @zkanda all problems are fixed on 3.0.5. Plz update <3

zkanda commented 1 year ago

Hello, I upgraded to latest, and it now works with Vite, but it doesn't seems to work with Webpack. Since that's what our project uses. I could reproduce it using create-react app

npx create-react-app my-app --template typescript

Update App.tsx with same code from the first comment.

I get this console error:

Uncaught TypeError: inputmask__WEBPACK_IMPORTED_MODULE_1__ is not a function
    at o (withHookFormMask.ts:16:1)
    at App (App.tsx:18:1)
    at renderWithHooks (react-dom.development.js:15851:1)
    at mountIndeterminateComponent (react-dom.development.js:19603:1)
    at beginWork (react-dom.development.js:21127:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3703:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3761:1)
    at invokeGuardedCallback (react-dom.development.js:3833:1)
    at beginWork$1 (react-dom.development.js:26981:1)
    at performUnitOfWork (react-dom.development.js:26109:1)
z1m1n commented 1 year ago

@eduardoborges hey! I'm having exactly same issue as @zkanda (using webpack 5)

eduardoborges commented 1 year ago

@zkanda & @z1m1n i fixed this regression. Thanks for contribuiting <3