Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

251
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda