search

viclafouch / mui-tel-input

📌 A phone number input designed for MUI (Material ui) V6 built with libphonenumber-js
https://viclafouch.github.io/mui-tel-input
MIT License
158 stars 65 forks source link

Unable to use "matchIsValidTel" on Next.js App Router Route Handler due to Client/Server Component Clash #134

Closed mrjackyliang closed 6 months ago

mrjackyliang commented 6 months ago

A partial error object of what I'm getting:

 ⨯ Error: Attempted to call styled() from the server but styled is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.
    at styled (XXXXX/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:254787)
    at eval (webpack-internal:///(rsc)/./node_modules/mui-tel-input/dist/mui-tel-input.es.js:46:71)
mrjackyliang commented 6 months ago

A workaround for now:

import { isValidPhoneNumber } from 'libphonenumber-js';
viclafouch commented 6 months ago

Hello !

Yes it's because the package doesn't have a correct split server and client.

Like mui-tel-input/client and mui-tel-inpit/server, but I don't think I will plan to do that. For now, you have to explicit use client.

mrjackyliang commented 6 months ago

Hello !

Yes it's because the package doesn't have a correct split server and client.

Like mui-tel-input/client and mui-tel-inpit/server, but I don't think I will plan to do that. For now, you have to explicit use client.

It's all good. The number checks go through the library, and it works as expected for me. Thanks for the amazing work!