grain texture not working on next.js 14 project (app dir)

[Faisal Jweihan]

Here is a sample of my code:

import dynamic from "next/dynamic"; import { Suspense } from "react"; import { ShaderGradient } from "shadergradient"; const View = dynamic( () => import("@/components/three/components/view").then((mod) => mod.View), { ssr: false, loading: () => ( <div className="size-96 flex items-center justify-center"> <svg className="-ml-1 mr-3 size-5 animate-spin text-black" fill="none" viewBox="0 0 24 24" > <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /> <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" /> </svg> </div> ), }, );

export const Landing = () => { return ( <View className="min-h-screen w-full"> <Suspense fallback={null}> <ShaderGradient cDistance={24} grain="on" color1="#ff5005" color2="#dbba95" color3="#d0bce1" /> </Suspense> </View> ); };

I would like to add that a dynamic import of the shader gradient module is giving an error : "Module not found: Package path . is not exported from package /node_modules/shadergradient (see exports field in /node_modules/shadergradient/package.json"

one last thing: What is the equivalent of the spiral option from the website in react? is it the frequency uniform?

Thanks!

[ruucm]

Hello here is app dir example with the latest next.js

It has grains as it is.

https://codesandbox.io/p/sandbox/github/ruucm/shadergradient/tree/main/apps/example-nextjs-approuter