Application error: a client-side exception has occurred - came in vercel production

[giriyaram]

Cannot read properties of undefined (reading 'sentry')

[BennyLWK]

Hi bro, I have the same issue when I run production locally. Do you have any solution? I appreciate any help you can provide.

[devkobby24]

Hi bro, I have the same issue when I run production both on vercel and locally. Do you have any solution? I appreciate any help you can provide.

[devkobby24]

@BennyLWK @giriyaram
I think I know why
since we're using react-three, Sentry's reactComponentAnnotation causes the error
As a workaround please disable reactComponentAnnotation in the sentry config files by setting its value to false

[milindkusahu]

Here is the solution, go to your page.tsx and use dynamic imports to import the RecentProjects and Grid components.

const RecentProjects = dynamic(() => import("../components/RecentProjects"), {
ssr: false,
});

const Grid = dynamic(() => import("../components/Grid"), {
ssr: false,
});

Here's what the final code will look like.

"use client";

import { navItems } from "@/data";

import Hero from "@/components/Hero";
// import Grid from "@/components/Grid";
import Footer from "@/components/Footer";
import Clients from "@/components/Clients";
import Approach from "@/components/Approach";
import Experience from "@/components/Experience";
// import RecentProjects from "@/components/RecentProjects";
import { FloatingNav } from "@/components/ui/FloatingNavbar";

import dynamic from "next/dynamic";

const RecentProjects = dynamic(() => import("../components/RecentProjects"), {
  ssr: false,
});

const Grid = dynamic(() => import("../components/Grid"), {
  ssr: false,
});

const Home = () => {
  return (
    <main className="relative bg-black-100 flex justify-center items-center flex-col  mx-auto sm:px-10 px-5 overflow-clip">
      <div className="max-w-7xl w-full">
        <FloatingNav navItems={navItems} />
        <Hero />
        <Grid />
        <RecentProjects />
        <Clients />
        <Experience />
        <Approach />
        <Footer />
      </div>
    </main>
  );
};

export default Home;

[CoderTianrui]

Here is the solution, go to your page.tsx and use dynamic imports to import the RecentProjects and Grid components.

const RecentProjects = dynamic(() => import("../components/RecentProjects"), { ssr: false, });

const Grid = dynamic(() => import("../components/Grid"), { ssr: false, });

Here's what the final code will look like.

"use client";

import { navItems } from "@/data";

import Hero from "@/components/Hero";
// import Grid from "@/components/Grid";
import Footer from "@/components/Footer";
import Clients from "@/components/Clients";
import Approach from "@/components/Approach";
import Experience from "@/components/Experience";
// import RecentProjects from "@/components/RecentProjects";
import { FloatingNav } from "@/components/ui/FloatingNavbar";

import dynamic from "next/dynamic";

const RecentProjects = dynamic(() => import("../components/RecentProjects"), {
  ssr: false,
});

const Grid = dynamic(() => import("../components/Grid"), {
  ssr: false,
});

const Home = () => {
  return (
    <main className="relative bg-black-100 flex justify-center items-center flex-col  mx-auto sm:px-10 px-5 overflow-clip">
      <div className="max-w-7xl w-full">
        <FloatingNav navItems={navItems} />
        <Hero />
        <Grid />
        <RecentProjects />
        <Clients />
        <Experience />
        <Approach />
        <Footer />
      </div>
    </main>
  );
};

export default Home;

Hi buddy,
I changed these two false but it still shows this error and when I visit my website it crashed in 1 sec..
My website: tianrui.blog

[CoderTianrui]

@BennyLWK @devkobby24 @giriyaram Have u guys solved this? If u figured it out please tell me, thanks!

[devkobby24]

i had to disable the react annotations in the installation of sentry to make it work

[CoderTianrui]

i had to disable the react annotations in the installation of sentry to make it work

Any side effect after u doing this?

[devkobby24]

I didn't get the error anymore

[CoderTianrui]

I didn't get the error anymore

Thanks! Will try this

[devkobby24]

Sure thing!

[CoderTianrui]

Bro can you share ur repo please? I delete all code related to "sentry" but it still pops this error.... @devkobby24

[devkobby24]

sure
https://github.com/devkobby24/dev-portfolio