Server-side validation and module dependency

[omeralpi]

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';

[catamphetamine]

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

…

On Sat, 24 Feb 2024 at 09:54, Omer Alpi ***@***.***> wrote: 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'; Also, I'm developing the Shadcn Phone Input <https://github.com/omeralpi/shadcn-phone-input> component using react-phone-number-input. Thank you. — Reply to this email directly, view it on GitHub <#440>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADUP3ZORO52R6Q2UMLFUCTYVGFC7AVCNFSM6AAAAABDXZDHN2VHI2DSMVQWIX3LMV43ASLTON2WKOZSGE2TEMJVGEZDCNA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[omeralpi]

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/[email protected]/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.

[catamphetamine]

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.

[catamphetamine]

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.

[omeralpi]

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. 🥹

[ahkhanjani]

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.