useSearchParams () error on build

Hello Guys, This the search page code. I have included the wrapping for the suspense boundary to handle the search component, Upon running npm run build I face this error message on deploying on vercel ;

Error Message : ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/search". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

12:16:27.970 at i (/vercel/path0/.next/server/chunks/591.js:1:11526)

12:16:27.970 at c (/vercel/path0/.next/server/chunks/591.js:1:22466)

12:16:27.970 at y (/vercel/path0/.next/server/app/search/page.js:1:15578)

12:16:27.970 at nj (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)

12:16:27.970 at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)

12:16:27.970 at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)

12:16:27.971 at nI (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47010)

12:16:27.971 at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47717)

12:16:27.971 at nM (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)

12:16:27.971 at nN (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)

12:16:27.971

12:16:27.971Error occurred prerendering page "/search". Read more: https://nextjs.org/docs/messages/prerender-error

12:16:27.971

12:16:28.024 ✓ Generating static pages (7/7)

12:16:28.248

12:16:28.248> Export encountered errors on following paths:

12:16:28.249 /search/page: /search

// app/search/page.js 'use client';

import React, { Suspense } from 'react'; import Search from '@/components/Search'; import { useSearchParams } from 'next/navigation';

function SearchPage() { const searchParams = useSearchParams(); // Get search parameters from the URL const location = searchParams.get("location") || ""; // Extract the location parameter

return (

); }

export default SearchPage;

node version : v20.17.0 package.json { "name": "enin-ltd", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "/react": "^2.10.2", "/react": "^11.13.3", "/styled": "^11.13.0", "/react-slot": "^1.1.0", "/api": "^2.20.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "framer-motion": "^11.11.8", "lucide-react": "^0.451.0", "next": "14.2.14", "react": "^18.3.1", "react-dom": "^18.3.1", "react-google-places-autocomplete": "^4.1.0", "react-icons": "^5.3.0", "react-multi-carousel": "^2.8.5", "react-router-dom": "^6.27.0", "react-slick": "^0.30.2", "scroll-lock": "^2.1.5", "slick-carousel": "^1.8.1", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "/react-slick": "^0.23.13", "postcss": "^8.4.47", "tailwindcss": "^3.4.13" } }

Hi, ! Did you manage to figure out what caused the error?

Yes i did. Thank you for the response. Apparently now the issue was that the component needed to be wrapped with the SUSPENSE boundary separately. The rest of the code now had to have its own function. So once i modified it to this it worked...

<<>> 'use client';

import React, { Suspense } from 'react'; import Search from '@/components/Search'; import { useSearchParams } from 'next/navigation';

function SearchPage() { return (

); }

const SearchContent = () => { const searchParams = useSearchParams(); // Get search parameters from the URL const location = searchParams.get("location") || ""; // Extract the location parameter const type = searchParams.get('type') || ""; // Get the type (rent/sale) const propertyType = searchParams.get('propertyType') || ""; // Get the specific property type

return (

); };

export default SearchPage;

Thanks for coming back with your solution, ! This will definitely help someone out there 😄