Giters

catamphetamine / react-phone-number-input

React component for international phone number input

Home Page:http://catamphetamine.gitlab.io/react-phone-number-input/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Server-side validation and module dependency

omeralpi opened this issue · comments

commented

Hello,

I've encountered an issue when using server actions with Next.js and attempting to validate phone numbers on the server side.

Currently, the documentation/code suggests using:

import { isValidPhoneNumber } from "react-phone-number-input";

However, this import is client-side oriented and might not be suitable for server-side validations due to its dependency on the react-phone-number-input package, which is primarily designed for client-side React applications.

As an alternative, it would be much better if there were a usage like this for server-side validations within Next.js server actions.

import { isValidPhoneNumber } from 'react-phone-number-input/libphonenumber';

or

import { isValidPhoneNumber } from 'react-phone-number-input/libphonenumber';
import { isValidPhoneNumber } from 'react-phone-number-input/core/libphonenumber';
commented
commented

I forgot to include the details. Here you go;

Codesandbox example

Screen.Recording.2024-02-24.at.14.21.04.mov

Error message;

ReactServerComponentsError:

You're importing a component that needs useRef. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

    ,-[/node_modules/.pnpm/input-format@0.3.9/node_modules/input-format/modules/react/Input.js:7:1]
 10 | import React, { useCallback, useRef } from 'react';

Hello. I don’t think that there could be any issues with using the package on the server side.

commented

Hmm, I see. Well, in that case just import the validation functions from libphonenumber-js package because all those functions are simply re-exported from that package.

libphonenumber-js package is a dependency of react-phone-number-input and is automatically installed.

commented

Or, as a workaround, you could do the thing it tells in the error message:

none of its parents are marked with "use client"

I.e. one could simply mark a parent component *.js file with "use client" at the top.

commented

Or, as a workaround, you could do the thing it tells in the error message:

none of its parents are marked with "use client"

I.e. one could simply mark a parent component *.js file with "use client" at the top.

Thank you for your response.

The problem starts there. In Server Actions, 'use client' cannot be used. The file from which we import the function, such as 'isValidPhoneNumber', should not contain hooks like useRef.

What I mean next is, I believe this issue can be resolved if we import such validation functions separately, for instance, something like 'react-phone-number-input/libphonenumber.' 🙏
You, as the creators of the package, would know better! 🫡

Hmm, I see. Well, in that case just import the validation functions from libphonenumber-js package because all those functions are simply re-exported from that package.

libphonenumber-js package is a dependency of react-phone-number-input and is automatically installed.

The challenge here is to manage the versions and ensure compatibility between these dependencies. 🥹

commented

Hmm, I see. Well, in that case just import the validation functions from libphonenumber-js package because all those functions are simply re-exported from that package.

Perhaps not re-exporting the utilities and having to install the dependency would solve similar issues.