An error occurred during deployment. Please fix:
Running build in Washington, D.C., USA (East) – iad1
Build machine configuration: 2 cores, 8 GB
Cloning github.com/SHEIKABDULLAHPM/digitalpro_portfolio (Branch: main, Commit: 5343aa2)
Previous build caches not available
Cloning completed: 499.000ms
Running "vercel build"
Vercel CLI 44.7.2
Detected `pnpm-lock.yaml` 9 which may be generated by pnpm@9.x or pnpm@10.x
Using pnpm@10.x based on project creation date
To use pnpm@9.x, manually opt in using corepack (https://vercel.com/docs/deployments/configure-a-build#corepack)
Installing dependencies...
Lockfile is up to date, resolution step is skipped
Progress: resolved 1, reused 0, downloaded 0, added 0
Packages: +824
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 824, reused 0, downloaded 65, added 39
Progress: resolved 824, reused 0, downloaded 101, added 55
Progress: resolved 824, reused 0, downloaded 206, added 101
Progress: resolved 824, reused 0, downloaded 278, added 136
Progress: resolved 824, reused 0, downloaded 405, added 197
Progress: resolved 824, reused 0, downloaded 431, added 206
Progress: resolved 824, reused 0, downloaded 574, added 278
Progress: resolved 824, reused 0, downloaded 657, added 321
Progress: resolved 824, reused 0, downloaded 681, added 329
Progress: resolved 824, reused 0, downloaded 694, added 333
Progress: resolved 824, reused 0, downloaded 695, added 333
Progress: resolved 824, reused 0, downloaded 699, added 335
Progress: resolved 824, reused 0, downloaded 709, added 337
Progress: resolved 824, reused 0, downloaded 811, added 385
Progress: resolved 824, reused 0, downloaded 824, added 506
Progress: resolved 824, reused 0, downloaded 824, added 681
Progress: resolved 824, reused 0, downloaded 824, added 694
Progress: resolved 824, reused 0, downloaded 824, added 698
Progress: resolved 824, reused 0, downloaded 824, added 757
Progress: resolved 824, reused 0, downloaded 824, added 824, done
dependencies:
+ @emotion/is-prop-valid 1.3.1
+ @hookform/resolvers 3.9.1
+ @radix-ui/react-accordion 1.2.2
+ @radix-ui/react-alert-dialog 1.1.4
+ @radix-ui/react-aspect-ratio 1.1.1
+ @radix-ui/react-avatar 1.1.2
+ @radix-ui/react-checkbox 1.1.3
+ @radix-ui/react-collapsible 1.1.2
+ @radix-ui/react-context-menu 2.2.4
+ @radix-ui/react-dialog 1.1.4
+ @radix-ui/react-dropdown-menu 2.1.4
+ @radix-ui/react-hover-card 1.1.4
+ @radix-ui/react-label 2.1.1
+ @radix-ui/react-menubar 1.1.4
+ @radix-ui/react-navigation-menu 1.2.3
+ @radix-ui/react-popover 1.1.4
+ @radix-ui/react-progress 1.1.1
+ @radix-ui/react-radio-group 1.2.2
+ @radix-ui/react-scroll-area 1.2.2
+ @radix-ui/react-select 2.1.4
+ @radix-ui/react-separator 1.1.1
+ @radix-ui/react-slider 1.2.2
+ @radix-ui/react-slot 1.2.3
+ @radix-ui/react-switch 1.1.2
+ @radix-ui/react-tabs 1.1.2
+ @radix-ui/react-toast 1.2.4
+ @radix-ui/react-toggle 1.1.1
+ @radix-ui/react-toggle-group 1.1.1
+ @radix-ui/react-tooltip 1.1.6
+ @react-three/drei 10.6.1
+ @react-three/fiber 9.3.0
+ autoprefixer 10.4.20
+ class-variance-authority 0.7.1
+ clsx 2.1.1
+ cmdk 1.0.4
+ date-fns 4.1.0
+ embla-carousel-react 8.5.1
+ expo 53.0.20
+ expo-asset 11.1.7
+ expo-file-system 18.1.11
+ expo-gl 15.1.7
+ framer-motion 12.23.12
+ geist 1.3.1
+ input-otp 1.4.1
+ lucide-react 0.454.0
+ next 14.2.16
+ next-themes 0.4.6
+ react 18.0.0
+ react-day-picker 9.8.0
+ react-dom 18.0.0
+ react-hook-form 7.54.1
+ react-native 0.80.2
+ react-resizable-panels 2.1.7
+ recharts 2.15.0
+ sonner 1.7.1
+ tailwind-merge 2.5.5
+ tailwindcss-animate 1.0.7
+ three 0.179.1
+ vaul 0.9.6
+ zod 3.24.1
devDependencies:
+ @types/node 22.0.0
+ @types/react 18.0.0
+ @types/react-dom 18.0.0
+ postcss 8.5.0
+ tailwindcss 3.4.17
+ typescript 5.0.2
Done in 21s using pnpm v10.14.0
Detected Next.js version: 14.2.16
Running "pnpm run build"
> my-v0-project@0.1.0 build /vercel/path0
> next build
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry
▲ Next.js 14.2.16
Creating an optimized production build ...
Failed to compile.
./app/about/page.tsx
Error:
x You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/
| docs/getting-started/react-essentials#the-use-client-directive
|
|
,-[/vercel/path0/app/about/page.tsx:91:1]
91 | { number: "50+", label: "Team Members" }
92 | ]
93 |
94 | export const metadata: Metadata = {
: ^^^^^^^^
95 | title: "About Us - Meet the DigitalPro Team",
96 | description: "Learn about DigitalPro's mission, values, and the expert team behind our award-winning digital marketing services.",
97 | openGraph: {
`----
Import trace for requested module:
./app/about/page.tsx
./app/portfolio/page.tsx
Error:
x You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/
| docs/getting-started/react-essentials#the-use-client-directive
|
|
,-[/vercel/path0/app/portfolio/page.tsx:3:1]
3 | import PortfolioClient from "./PortfolioClient"
4 | import type { Metadata } from "next"
5 |
6 | export const metadata: Metadata = {
: ^^^^^^^^
7 | title: "Portfolio - Our Digital Marketing Success Stories",
8 | description: "Explore our portfolio of successful digital marketing projects including web development, SEO, e-commerce, and social media campaigns with proven results.",
9 | openGraph: {
`----
Import trace for requested module:
./app/portfolio/page.tsx
./app/services/content-marketing/page.tsx
Error:
x You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/
| docs/getting-started/react-essentials#the-use-client-directive
|
|
,-[/vercel/path0/app/services/content-marketing/page.tsx:374:1]
374 | )
375 | }
376 |
377 | export const metadata: Metadata = {
: ^^^^^^^^
378 | title: "Content Marketing Services - Strategic Content Creation",
379 | description: "Professional content marketing services including blog writing, video content, email campaigns, and content strategy that drives engagement and conversions.",
380 | openGraph: {
`----
Import trace for requested module:
./app/services/content-marketing/page.tsx
./app/services/ecommerce/page.tsx
Error:
x You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/
| docs/getting-started/react-essentials#the-use-client-directive
|
|
,-[/vercel/path0/app/services/ecommerce/page.tsx:375:1]
375 | )
376 | }
377 |
378 | export const metadata: Metadata = {
: ^^^^^^^^
379 | title: "E-commerce Development Services - Online Store Solutions",
380 | description: "Professional e-commerce development services including Shopify, WooCommerce, and custom online stores. Built for sales, scalability, and success.",
381 | openGraph: {
`----
Import trace for requested module:
./app/services/ecommerce/page.tsx
./app/services/seo/page.tsx
Error:
x You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/
| docs/getting-started/react-essentials#the-use-client-directive
|
|
,-[/vercel/path0/app/services/seo/page.tsx:381:1]
381 | )
382 | }
383 |
384 | export const metadata: Metadata = {
: ^^^^^^^^
385 | title: "SEO Services - Professional Search Engine Optimization",
386 | description: "Professional SEO services to improve search rankings, drive organic traffic, and increase online visibility. Proven strategies that deliver results.",
387 | openGraph: {
`----
Import trace for requested module:
./app/services/seo/page.tsx
> Build failed because of webpack errors
ELIFECYCLE Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1
256d ago
I need to fix the deployment error by properly separating client components from server components that export metadata. The issue is that I have "use client" directives in files that also export metadata, which is not allowed in Next.js.
I've successfully fixed the deployment error by properly separating all client components from server components that export metadata. Here's what I accomplished:
Fixed Architecture:
✅ Server Components (with metadata):
app/about/page.tsx- Server component with metadata exportapp/portfolio/page.tsx- Server component with metadata exportapp/services/*/page.tsx- All service pages as server components with metadata
✅ Client Components (with interactivity):
app/about/AboutClient.tsx- All client-side functionality and animationsapp/portfolio/PortfolioClient.tsx- Portfolio filtering and modal functionalityapp/services/*/[ServiceName]Client.tsx- Individual service page client components
Key Changes Made:
1. Proper Component Separation:
- Server components handle metadata exports and SEO
- Client components handle all interactive features, animations, and state management
- Clean imports - server components simply import and render client components
2. Complete Client Components:
- AboutClient.tsx - Full about page with team profiles, company story, values, and animations
- PortfolioClient.tsx - Complete portfolio with filtering, project modals, and interactive features
- Service Client Components - Each service has its own client component with full functionality
3. Maintained All Features:
- Interactive filtering on portfolio page
- Project modals with detailed information
- Framer Motion animations throughout
- Responsive design and hover effects
- All existing content and functionality preserved
Benefits:
- ✅ Deployment Ready - No more "use client" with metadata errors
- ✅ SEO Optimized - Proper metadata exports for search engines
- ✅ Performance - Server components for static content, client components for interactivity
- ✅ Maintainable - Clean separation of concerns
The deployment error should now be completely resolved, and the site will build successfully on Vercel while maintaining all the interactive features and animations you had before.
256d ago
I'll create a comprehensive AI chatbot assistant for your portfolio website that can recommend services and answer FAQs. Let me build this with all the features you requested.
I've successfully created a comprehensive AI chatbot assistant for your portfolio website! Here's what I've built:
Key Features Implemented:
✅ Floating Chat Interface:
- Animated chat bubble in bottom-right corner with pulse effect
- Smooth animations using Framer Motion
- Tooltip that appears after 2 seconds
- Dark/light mode support
✅ Smart AI Assistant:
- GPT-4o-mini integration via Vercel AI SDK 1
- Service recommendations based on user queries
- FAQ fallback system with structured JSON data
- Contextual responses that understand user intent
✅ Advanced Chat Features:
- Real-time streaming responses
- Typing indicators with animated dots
- Chat history saved in localStorage
- Message formatting with clickable links
- Quick action buttons for common queries
✅ Professional UI/UX:
- Gradient design matching your brand
- Responsive layout that works on all devices
- Smooth scrolling and auto-scroll to new messages
- Clear chat functionality
- Book a Call button integration
AI Capabilities:
Service Recommendations:
The bot can intelligently recommend services based on keywords:
- Web Development - for website, landing page, online presence queries
- SEO Services - for search, ranking, organic traffic queries
- Paid Advertising - for ads, PPC, immediate results queries
- Social Media - for Instagram, Facebook, social presence queries
- Content Marketing - for blog, copywriting, content strategy queries
- E-commerce - for online store, Shopify, sales queries
FAQ System:
Automatically answers common questions about:
- Business hours and contact information
- Pricing and service costs
- Tools and technologies used
- Project timelines
- Company policies
Next Steps:
- Add your OpenAI API key to environment variables (
OPENAI_API_KEY) - Customize the FAQ data in
lib/faqs.jsonwith your specific information - Update contact details and Calendly link in the components
- Test the service recommendations with various user queries
The chatbot is now fully integrated into your portfolio and will help convert visitors into leads by providing instant, intelligent assistance! 🎉
240d ago
Sources
