Minified React error #130

[FacuCarbon]

Hello! first to congratulate for the operation, it is exquisite.
On the other hand, locally it works perfectly for me. But when uploading it to production, I get the error: Uncaught Error: Minified React error #130 with the component, I use vite, do you have any solution? Thank you so much.

[nerijusgood]

Have the same minification issue. It's something with imports.

This package needs to update!

To recreate just use Vite build and this will try to minify and break

[rogorman9]

This needs a real fix for sure, but as a workaround I was able to get it to work by doing this:

import PI from "react-phone-input-2";
const ReactPhoneInput = PI.default ? PI.default : PI;

[FacuCarbon]

@rogorman9
Thank you very much! this solution worked for me. Could you explain a little more why it happens?

[femi-Zedev]

I'm using react-phone-input-2 too with vite and React Ts and stuck on the same issue. @rogorman9 workaround didn't work for me. The type checker says "Property 'default' does not exist on type 'FC' ". They should take a look at this issue

[femi-Zedev]

ReactPhoneInput

Finaly I managed to make it work. I convert my component to JSX to avoid type checking

[Thibaud05]

Dirty fix for TSX

const ReactPhoneInput = (PI as any).default !== null ? (PI as any).default : PI

[femi-Zedev]

So I come with a workound that works for both dev and prod. It's just litteraly checking environment mode. To do so you have to import React Phone Input like in previous workaround by @Thibaud05 and based on env mode apply the fix
import PI from "react-phone-input-2"; const ReactPhoneInput = import.meta.env.PROD ? (PI as any).default : PI;
Note that I use import.meta.env.PROD because of Vite. If you are using CRA consider using process.env.NODE_ENV === 'development' to check if your are in prod or dev

[TawalMc]

@arnaudakotonou97 great

[Sashankr]

This needs a real fix for sure, but as a workaround I was able to get it to work by doing this:

import PI from "react-phone-input-2";
const ReactPhoneInput = PI.default ? PI.default : PI;

Thank you very much! I am using React 18 , this works!

[zeyarpaing]

I published a package based on #532 changes because PR is still pending and my codebase need it urgently. You can just find and replace all the occurrences of react-phone-input-2 to vreact-phone-input.
vreact-phone-input

[ValterNeto9]

Dirty fix for TSX

const ReactPhoneInput = (PI as any).default !== null ? (PI as any).default : PI

It works for me! Thanks a lot!

[ValterNeto9]

Hello! first to congratulate for the operation, it is exquisite. On the other hand, locally it works perfectly for me. But when uploading it to production, I get the error: Uncaught Error: Minified React error #130 with the component, I use vite, do you have any solution? Thank you so much.

I faced the same problem! your thread save my life. Thanks man!

[JulesImbert]

thanks it work

[ahsan-khan1999]

@rogorman9 ;
Thanks man! this solution worked

[gamegee]

Hello, same issue here I will go with the workaround 👍
If you want to keep typesafety this solution works:

import React from 'react'
import PI, { PhoneInputProps } from 'react-phone-input-2'

const ReactPhoneInput: React.FC<PhoneInputProps> = (PI as any).default || PI

@bl00mber @rebebop do you plan a long term fix for this ?

[sample-usr]

@gamegee I haven't updated that package in a long time. But I'll take a look at it over the weekend to see if I can add a quick fix to it.

[chaudharyShub]

const ReactPhoneInput = (RPI as any).default ? (RPI as any).default : RPI;

If I am using this, I am not able to use countryCodeEditable={false} and country code is deleteable, and if I don't use the above code, my code is breaking in production server.

[FacuCarbon]

const ReactPhoneInput = (RPI as any).default ? (RPI as any).default : RPI;

Si estoy usando esto, no puedo usar countryCodeEditable={false} y el código de país se puede eliminar, y si no uso el código anterior, mi código se está rompiendo en el servidor de producción.

Me pasó lo mismo y lo solucioné creando un componente ts de esta manera:

import PI from "react-phone-input-2"; const ReactPhoneInput = import.meta.env.PROD ? (PI as any).default : PI; export default ReactPhoneInput;

y en la vista necesaria directamente lo importas y lo podes usar normalmente. Aclaro que lo metí en un componente ts, para poder reutilizarlo a lo largo de mi aplicación.

import ReactPhoneInput from "../phone/Phone";