Next.js Discord

Discord Forum

Client Side Exception 500 error in production next js 13

Unanswered
Persian posted this in #help-forum
Open in Discord
PersianOP
Console Log:
{
    "name": "Internal Server Error.",
    "message": "500 - Internal Server Error.",
    "statusCode": 500
}

main-cd465c1d83f5a625.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred

11 Replies

PersianOP
Pages involved:
'use client'
import SuccessOrder from '@/components/SuccessOrder/SuccessOrder'
import React from 'react'
import styles from './page.module.css'
import { useParams } from 'next/navigation'

const page = () => {
  const params = useParams()
  return (
    <div className={styles.success}>
        <SuccessOrder id={params.id}/>
    </div>
  )
}

export default page
import React from 'react'
import styles from './SuccessOredr.module.css'
import { FiCheck } from 'react-icons/fi'

const SuccessOrder = ({id}) => {
    return (
        <div className={styles.successOrder}>
            {/* <div className={styles.backButton}></div> */}
            <div className={styles.successHeading}>
                <div className={styles.shLeft}>Payment Successful</div>
                <div className={styles.shRight}>
                    <div className={styles.stepper}>
                        <div className={styles.step}>
                            <div className={styles.stepCircle}><FiCheck /></div>
                            <div className={styles.stepText}>Delivery</div>
                        </div>
                        <div className={styles.stepLine}></div>
                        <div className={styles.step}>
                        <div className={styles.stepCircle}><FiCheck /></div>
                            <div className={styles.stepText}>Payment</div>
                        </div>
                        <div className={styles.stepLine}></div>
                        <div className={styles.step}>
                        <div className={styles.stepCircle}><FiCheck /></div>
                            <div className={styles.stepText}>Order</div>
                        </div>
                    </div>
                </div>
            </div>
            <div className={styles.successOWrap}>
                <div className={styles.successOWUnder}>
                    <img src="/assets/img/success.png" alt="" />

                    <div className={styles.successOWUHeader}>
                        <div className={styles.successOWUHHeading}>Payment Success!</div>
                        <div className={styles.successOWUHPara}>Your payment has been successfully done. <br /> Payment ID:- {id}</div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default SuccessOrder
Layout JS:
import Navbar from '@/components/Navbar/Navbar'
import './globals.css'
import { Inter } from 'next/font/google'
import Footer from '@/components/Footer/Footer'
import { CheckoutProvider } from '@/context/CheckoutContext'
import { CartProvider } from '@/context/CartContext'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'The Diamour',
  description: 'Allure of exquisite diamond jewelry accessible to all',
  icons: {
    icon: '/android-chrome-72x72.png',
    apple: '/apple-touch-icon.png'
  }
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <CartProvider>
          <CheckoutProvider>
            <Navbar />
            {children}
            <Footer />
          </CheckoutProvider>
        </CartProvider>
      </body>
    </html>
  )
}
This error is only on the link: https://thediamour.com/success/f74e4cc6-5481-4ea4-83d6-7369e4cf283d
Navbar
Footer
Cart context js
Checkout Context:
// CheckoutContext.js
'use client'
import React, { createContext, useContext, useState } from 'react';

const CheckoutContext = createContext();

export const useCheckoutContext = () => {
    return useContext(CheckoutContext);
};

export const CheckoutProvider = ({ children }) => {
    const [checkoutData, setCheckoutData] = useState({
        name: '',
        phone: '',
        email: '',
        address: '',
        pincode: '',
        city: '',
        state: '',
        country: '',
        paymentMethod: '',
    });

    const [step, setStep] = useState(1);

    const nextStep = () => {
        setStep(step + 1);
    };

    const prevStep = () => {
        setStep(step - 1);
    };

    const submitForm = () => {
        // Submit the formData to a backend or perform desired actions
        console.log('Form submitted:', checkoutData);
    };

    const contextValue = {
        checkoutData,
        setCheckoutData,
        step,
        nextStep,
        prevStep,
        submitForm,
    };

    return (
        <CheckoutContext.Provider value={contextValue}>
            {children}
        </CheckoutContext.Provider>
    );
};
Please help
I'm stuck on this one.