Cleave.js in React: TypeError:无法设置未定义的属性(设置'element')

Question

我在许多反应项目中都使用过克莱。但今天突然间，它在一个新的项目中失效了。

以下是我的软件包(这样您就可以看到版本)：

"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"
  },

下面是组件内部Cleave的实现：

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

但是我的编译器一直抛出以下错误：Uncaught TypeError: Cannot set properties of undefined (setting 'element')

我尝试在CodeSandbox中构建相同的组件，看看它是否与我的create实例有关，但是我在沙箱中得到了与我在这里相同的东西。

我知道有许多类似于此的问题，但每个问题似乎都是特定于实现的，而且似乎没有适合我的情况的答案。

Answer 1

我解决了这个问题。导入时，重要的是使用cleave.js/react，而不仅仅是cleave.js。

我还需要导入用于国际化电话号码的支持文件，因此我的导入结果如下所示：

import React, { useContext } from 'react'
import Cleave from 'cleave.js/react'
import 'cleave.js/dist/addons/cleave-phone.i18n.js'