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: Prerender Error with Next.js | Next.js
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 (
<Suspense fallback={
Loading…}>
);
}
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”: {
“@chakra-ui/react”: “^2.10.2”,
“@emotion/react”: “^11.13.3”,
“@emotion/styled”: “^11.13.0”,
“@radix-ui/react-slot”: “^1.1.0”,
“@react-google-maps/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”: {
“@types/react-slick”: “^0.23.13”,
“postcss”: “^8.4.47”,
“tailwindcss”: “^3.4.13”
}
}