Cleave.js in React: TypeError: Cannot set properties of undefined (setting 'element')

Question

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.

Can you show the parent component as well? – Ricardo Sanchez May 31 '22 at 07:00 — Ricardo Sanchez, May 31 '22 at 07:00

score 1 · Answer 1 · answered May 31 '22 at 20:23

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'

Cleave.js in React: TypeError: Cannot set properties of undefined (setting 'element')

1 Answers1