TypeError: Inputmask is not a function about use-mask-input HOT 9 CLOSED

@NandoBruch Voce poderia marcar um papo de 1horinha pra a gente ver isso em pair? Porque nao estou conseguindo pegar o problema.

Segue o link do meu calendly

Claro! Marquei lá

from use-mask-input.

Estou utilizando o hook em uma aplicação que usa Next 13.

A implementação segue o exemplo mostrado no readme.

import { useForm } from 'react-hook-form';
import { useHookFormMask } from 'use-mask-input';

type FormType = {
  guest: any;
  cpf: string;
};

type FormProps = {
  submit: (data: FormType) => void;
};

const Form: FC<FormProps> = ({ submit, ...props }) => {
  const { register, handleSubmit } = useForm<FormType>({
    defaultValues: {
      guest: '',
      cpf: ''
    }
  });
  const registerWithMask = useHookFormMask(register);

  const onSubmit = (data: FormType) => {
    submit(data);
  };
  return (
    <div {...props}>
      <h3>titulo</h3>
      <form onSubmit={handleSubmit(data => onSubmit(data))}>
        <TextInput
          {...registerWithMask('cpf', 'cpf')}
          label='CPF'
        />
...

Rodando localmente, ao carregar a página, o erro recebido é:

Poderia mostrar como está seu package.json?

from use-mask-input.

Estou utilizando o hook em uma aplicação que usa Next 13.
A implementação segue o exemplo mostrado no readme.

import { useForm } from 'react-hook-form';
import { useHookFormMask } from 'use-mask-input';

type FormType = {
  guest: any;
  cpf: string;
};

type FormProps = {
  submit: (data: FormType) => void;
};

const Form: FC<FormProps> = ({ submit, ...props }) => {
  const { register, handleSubmit } = useForm<FormType>({
    defaultValues: {
      guest: '',
      cpf: ''
    }
  });
  const registerWithMask = useHookFormMask(register);

  const onSubmit = (data: FormType) => {
    submit(data);
  };
  return (
    <div {...props}>
      <h3>titulo</h3>
      <form onSubmit={handleSubmit(data => onSubmit(data))}>
        <TextInput
          {...registerWithMask('cpf', 'cpf')}
          label='CPF'
        />
...

Rodando localmente, ao carregar a página, o erro recebido é:

Poderia mostrar como está seu package.json?

Claro:

"dependencies": {
   "@phosphor-icons/react": "^2.0.9",
   "@stitches/react": "^1.2.8",
   "@types/node": "18.14.2",
   "@types/react": "18.0.28",
   "@types/react-dom": "18.0.11",
   "axios": "^1.3.4",
   "dotenv": "^16.0.3",
   "eslint-config-next": "13.2.1",
   "inputmask": "^5.0.9-beta.16",
   "next": "13.2.1",
   "react": "18.2.0",
   "react-dom": "18.2.0",
   "react-hook-form": "^7.43.9",
   "typescript": "4.9.5",
   "use-mask-input": "^3.3.0"
 },
 "devDependencies": {
   "@typescript-eslint/eslint-plugin": "^5.54.0",
   "@typescript-eslint/parser": "^5.54.0",
   "eslint": "^8.35.0",
   "eslint-config-airbnb": "^19.0.4",
   "eslint-config-prettier": "^8.6.0",
   "eslint-plugin-import": "^2.27.5",
   "eslint-plugin-jsx-a11y": "^6.7.1",
   "eslint-plugin-prettier": "^4.2.1",
   "eslint-plugin-react": "^7.32.2",
   "eslint-plugin-react-hooks": "^4.6.0",
   "prettier": "^2.8.4"
 }
}

Caso ajude, quando eu tento registrar o input com a aplicação já rodando, quando o next roda o live reload só do clientSide, o hook funciona perfeitamente. Mas qualquer refresh da página, que o Next tenta gerar a página via servidor, o erro do print acima é exibido,

from use-mask-input.

Estou utilizando o hook em uma aplicação que usa Next 13.

A implementação segue o exemplo mostrado no readme.

import { useForm } from 'react-hook-form';

import { useHookFormMask } from 'use-mask-input';

type FormType = {

guest: any;

cpf: string;

};

type FormProps = {

submit: (data: FormType) => void;

};

const Form: FC = ({ submit, ...props }) => {

const { register, handleSubmit } = useForm({

defaultValues: {

  guest: '',

  cpf: ''

}

});

const registerWithMask = useHookFormMask(register);

const onSubmit = (data: FormType) => {

submit(data);

};

return (

<div {...props}>

  <h3>titulo</h3>

  <form onSubmit={handleSubmit(data => onSubmit(data))}>

    <TextInput

      {...registerWithMask('cpf', 'cpf')}

      label='CPF'

    />

...

Rodando localmente, ao carregar a página, o erro recebido é:

Poderia mostrar como está seu package.json?

Claro:

"dependencies": {

   "@phosphor-icons/react": "^2.0.9",

   "@stitches/react": "^1.2.8",

   "@types/node": "18.14.2",

   "@types/react": "18.0.28",

   "@types/react-dom": "18.0.11",

   "axios": "^1.3.4",

   "dotenv": "^16.0.3",

   "eslint-config-next": "13.2.1",

   "inputmask": "^5.0.9-beta.16",

   "next": "13.2.1",

   "react": "18.2.0",

   "react-dom": "18.2.0",

   "react-hook-form": "^7.43.9",

   "typescript": "4.9.5",

   "use-mask-input": "^3.3.0"

 },

 "devDependencies": {

   "@typescript-eslint/eslint-plugin": "^5.54.0",

   "@typescript-eslint/parser": "^5.54.0",

   "eslint": "^8.35.0",

   "eslint-config-airbnb": "^19.0.4",

   "eslint-config-prettier": "^8.6.0",

   "eslint-plugin-import": "^2.27.5",

   "eslint-plugin-jsx-a11y": "^6.7.1",

   "eslint-plugin-prettier": "^4.2.1",

   "eslint-plugin-react": "^7.32.2",

   "eslint-plugin-react-hooks": "^4.6.0",

   "prettier": "^2.8.4"

 }

}

Caso ajude, quando eu tento registrar o input com a aplicação já rodando, quando o next roda o live reload só do clientSide, o hook funciona perfeitamente. Mas qualquer refresh da página, que o Next tenta gerar a página via servidor, o erro do print acima é exibido,

Você poderia remover o inputmask das dependências e testar? Lembrando que você precisa usar o "use client" no componente, pois a lib usa o useEffect por baixo.

from use-mask-input.

Estou utilizando o hook em uma aplicação que usa Next 13.

A implementação segue o exemplo mostrado no readme.

import { useForm } from 'react-hook-form';

import { useHookFormMask } from 'use-mask-input';

type FormType = {

guest: any;

cpf: string;

};

type FormProps = {

submit: (data: FormType) => void;

};

const Form: FC = ({ submit, ...props }) => {

const { register, handleSubmit } = useForm({

defaultValues: {

  guest: '',

  cpf: ''

}

});

const registerWithMask = useHookFormMask(register);

const onSubmit = (data: FormType) => {

submit(data);

};

return (

<div {...props}>

  <h3>titulo</h3>

  <form onSubmit={handleSubmit(data => onSubmit(data))}>

    <TextInput

      {...registerWithMask('cpf', 'cpf')}

      label='CPF'

    />

...

Rodando localmente, ao carregar a página, o erro recebido é:

Poderia mostrar como está seu package.json?

Claro:

"dependencies": {

   "@phosphor-icons/react": "^2.0.9",

   "@stitches/react": "^1.2.8",

   "@types/node": "18.14.2",

   "@types/react": "18.0.28",

   "@types/react-dom": "18.0.11",

   "axios": "^1.3.4",

   "dotenv": "^16.0.3",

   "eslint-config-next": "13.2.1",

   "inputmask": "^5.0.9-beta.16",

   "next": "13.2.1",

   "react": "18.2.0",

   "react-dom": "18.2.0",

   "react-hook-form": "^7.43.9",

   "typescript": "4.9.5",

   "use-mask-input": "^3.3.0"

 },

 "devDependencies": {

   "@typescript-eslint/eslint-plugin": "^5.54.0",

   "@typescript-eslint/parser": "^5.54.0",

   "eslint": "^8.35.0",

   "eslint-config-airbnb": "^19.0.4",

   "eslint-config-prettier": "^8.6.0",

   "eslint-plugin-import": "^2.27.5",

   "eslint-plugin-jsx-a11y": "^6.7.1",

   "eslint-plugin-prettier": "^4.2.1",

   "eslint-plugin-react": "^7.32.2",

   "eslint-plugin-react-hooks": "^4.6.0",

   "prettier": "^2.8.4"

 }

}

Caso ajude, quando eu tento registrar o input com a aplicação já rodando, quando o next roda o live reload só do clientSide, o hook funciona perfeitamente. Mas qualquer refresh da página, que o Next tenta gerar a página via servidor, o erro do print acima é exibido,

Você poderia remover o inputmask das dependências e testar? Lembrando que você precisa usar o "use client" no componente, pois a lib usa o useEffect por baixo.

Claro! Removi a lib, criei um client component simples para fazer o teste.

'use client';

import { FC, InputHTMLAttributes } from 'react';
import { useForm } from 'react-hook-form';
import { useHookFormMask } from 'use-mask-input';

type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {};

const TestComponent: FC<InputProps> = () => {
  const { register } = useForm();

  const registerWithMask = useHookFormMask(register);
  return (
    <form>
      <input {...registerWithMask('cpf', 'cpf')} className='input-field' />
    </form>
  );
};

export default TestComponent;

Fiz o teste com a lib e sem a lib instalada algumas vezes, em todos os casos o erro persiste :/

from use-mask-input.

@NandoBruch Voce poderia marcar um papo de 1horinha pra a gente ver isso em pair? Porque nao estou conseguindo pegar o problema.

Segue o link do meu calendly

from use-mask-input.

@NandoBruch @eduardoborges
Olá, qual foi o resultado dessa discussão? Estou enfrentando o mesmo problema usando o remix. Isso tem algo a ver com a renderização do lado do servidor?

from use-mask-input.

@NandoBruch @eduardoborges

Olá, qual foi o resultado dessa discussão? Estou enfrentando o mesmo problema usando o remix. Isso tem algo a ver com a renderização do lado do servidor?

Exatamente, isso se resolve no next com "use client".
Nunca usei Remix, posso tentar viabilizar uma correção.

from use-mask-input.

@eduardoborges Peço desculpas, acabei não conseguindo aparecer a agenda devido a alguns problemas, será que poderíamos tentar novamente? Acabei que não consegui solucionar o problema utilizando 'use client'

from use-mask-input.