Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

245
Visualizações
Cleave.js in React: TypeError: Cannot set properties of undefined (setting 'element')

I have used Cleave in MANY React projects. But suddenly today it is not working in a new project.

Here are my packages (so you can see versions):

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "cleave.js": "^1.6.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

Here is the implementation of Cleave inside a component:

import React, { useContext } from 'react'
import Cleave from 'cleave.js'

const PhoneInput = ({
  onChange,
  passedValue,
}) => {
  return (
    <Cleave 
      placeholder="Input a phone number" 
      onChange={onChange}
      value={passedValue}
      options={{
        phone: true, 
        phoneRegionCode: 'us'
      }}
    />
  )
}

export default PhoneInput

But my compiler keeps throwing the following error: Uncaught TypeError: Cannot set properties of undefined (setting 'element')

I have tried building this same component in a CodeSandbox to see if it was maybe something with my instance of create-react-app, but I got the same thing in the sandbox as I got here.

I know there are many questions similar to this out there, but each seems specific to the implementation, and no answers that fit my case seemed to exist.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

I solved this. When importing, it is important to use cleave.js/react and not just cleave.js.

I also needed to import the support files for internationalizing phone numbers, so my imports ended up looking like this:

import React, { useContext } from 'react'
import Cleave from 'cleave.js/react'
import 'cleave.js/dist/addons/cleave-phone.i18n.js'
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda