CODEWITHSUNDEEP
next.jsnext.js13app-router
work
work

Reputation: 45

Nextjs 13 App Router: I can't import a module to my client component

My Code:

"use client"

import vine from "@vinejs/vine"; //cause problem
export default function Test() {
return <></>
}

Error:

Failed to compile
node:dns/promises
Module build failed: UnhandledSchemeError: Reading from "node:dns/promises" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

It seems like the module require some server function? any ideas?

Upvotes: 0

Views: 925

Answers (1)

avinashcodelabs
avinashcodelabs

Reputation: 36

vineJS is a Node.js based validation library and only works on Node.js server.

As per your code, "use client" directive makes the React component client side and executes on the browser, so importing and running vineJS on the browser is not allowed as it requires Node.js, hence the error.

Alternative solution,

  1. Use zod or validator.js or yup validation libraries which works on both browser and Node.js.

  2. Use client form libraries such as react-hook-form or formik. They have built-in form validation or you extend it by using the above validation libraries.

Upvotes: 1

Related Questions