Also when i run npm run build again other page throws and error

Thanks in advance for any solutions

Next.js v15.2.1
Node v23.9.0
NPM 11.1.0

Can you share the code of privacy-policy page?

const PrivacyPolicy = () => {
return <div>hello world</div>;
};

export default PrivacyPolicy;

I dont think that pages are the problem, since for every npm run build the error appears on different page. Maybe its a config problem?

I do use useSearchParams though (in services page), maybe its causing the problem?

Could you try next 15.1.0?

Also check the code of the pages, you may be omitting something unintentionally.

Issue still remain

I looked through the code, the only thing that could cause the problem in my opinion is that i use useSearchParams, on the services page,
"use client";

import { useState } from "react";
import { useSearchParams } from "next/navigation";
import Navbar from "@/components/Navbar";
import servicesData from "@/data/services.json";
import SearchBar from "@/components/SearchBar";
import ServiceCategory from "@/components/ServiceCategory";
import AnimatedHeading from "@/components/AnimatedHeading";
import Footer from "@/app/sections/Footer";

const Services = () => {
const searchParams = useSearchParams();
const initialSearch = searchParams.get("search") || "";
const [search, setSearch] = useState(initialSearch);
...

Maybe its a problem with the next js config file?
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack(config) {
config.module.rules.push({
test: /.svg$/,
use: ["@svgr/webpack"],
});
return config;
},
};

export default nextConfig;

it seems to me that your implementation is correct, how about trying to delete the .next directory?

hi, i deleted .next, didnt help. I also already tried deleting node_modules and the .next and running npm i and npm run build doesnt work either.

What i see is that now on every try running the npm run build the services page causes the error, maybe its one of its components?

return (
#Unknown Channel
<Navbar />
<section className="relative w-full min-h-[100dvh] flex justify-center overflow-hidden">
<section className="w-2/4 max-lg:w-full gap-8 max-lg:mt-24 h-full flex flex-col items-center bg-white text-blue-500 py-12 px-6">
<AnimatedHeading text="Wyszukaj usługę lub kategorię" />
<SearchBar search={search} setSearch={setSearch} />

<section className="w-full space-y-8">
{filteredServices.map((category, index) => (
<ServiceCategory
key={index}
category={category.category}
services={category.services}
index={index}
/>
))}
</section>
</section>
</section>
<Footer />
</>
);

This is the search bar component:
"use client";

import React from "react";
import { motion } from "framer-motion";

const SearchBar = ({ search, setSearch }) => {
return (
<motion.input
type="text"
placeholder="🔍 Wyszukaj usługę lub kategorię..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-2/3 md:w-1/3 max-lg:w- px-4 py-2 border border-gray-300 rounded-lg mb-6"
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
/>
);
};

export default SearchBar;

Sorry for that much of code

I would say that you create another project and move the search components part by part and see where it fails. If you want to do it within your project, if fine but try it with caution.

Okay I'll try that thanks a lot for your help

Wait there are many weird things here... Hooks are supposed to be called at the top level of your components (or hooks), not inside conditions, or loops, or callbacks (the hook use() is the exception).

Also, useState() will provide the default value when pre-rendering, and btw useSearchParams() will also be available on the server for dynamic pages for the initial renderinf of your client component so there's no need to worry about it breaking.