Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

[carlosLMZarego]

hello guys, after implements this package in my project, in dev my project works correctly, but in my build, when I navigate to the component, I get this error:

index.7b87042a.js:171 
        
       Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `fn`.
    at L1 (index.7b87042a.js:171:46)
    at P1 (index.7b87042a.js:171:371)
    at U (index.7b87042a.js:115:2335)
    at X (index.7b87042a.js:115:4594)
    at ht (index.7b87042a.js:115:8114)
    at Br (index.7b87042a.js:132:2968)
    at k7 (index.7b87042a.js:132:8281)
    at r_ (index.7b87042a.js:134:11912)
    at R1 (index.7b87042a.js:151:2145)
    at F_ (index.7b87042a.js:147:22203)

I had to revert the changes and don't use the component, after revert this to a simple input the error disappear

this is how I use the component

  const [phone,setPhone] = useState<string>("")

//some lines
// return


 <PhoneInput
                  inputClass="!h-14 !w-full !text-lg"
                  country={'us'}
                  value={phone}
                  onChange={setPhone}
              />

I'm using vite, not sure if this could affect in something...

thanks

Update

Seems to be a problem in some code in the package that breaks the compatibility with rollup

https://github.com/vitejs/vite/discussions/7040 https://github.com/vitejs/vite/issues/2139#issuecomment-1024852072

[LvFarias]

I'm having the same problem. I'm using vite. When I test locally everything works, but then I run the build for production and I get this error when navigating to the component

[shubham-chawla]

I was having the same problem with the vite setup.

Found a workaround by first checking the imported component

import PhoneInput from 'react-phone-input-2'

const PhoneInputComponent = PhoneInput.default ? PhoneInput.default : PhoneInput

<PhoneInputComponent.../>

[shahbaazdev]

I was having the same problem with the vite setup.

Found a workaround by first checking the imported component

import PhoneInput from 'react-phone-input-2'

const PhoneInputComponent = PhoneInput.default ? PhoneInput.default : PhoneInput

<PhoneInputComponent.../>

work for me

[stephaned-ev]

It does the job, but raises a Typescript error : Property 'default' does not exist on type 'FC<PhoneInputProps>'.

Here is the cleanest solution I came with : https://github.com/vitejs/vite/issues/2139#issuecomment-1495759329

Handle the problem at the build level and be able to use the component normally (for instance PhoneInput)