The problem Im facing is that neither on development nor on production,when Im on local, i get no error on the route of /blog/page.jsx . The moment i check the same page on the deployed version i see this on my page :Application error: a client-side exception has occurred (see the browser console for more information).
'use server';import React from 'react';import LatestBlog from '@/src/components/blog/LatestBlog';const BlogArchive = async () => {return (<div><LatestBlog/></div> );};export default BlogArchive;'use client'import React from 'react';const LatestBlog = () => {return (<section className={'container'}></section> );};export default LatestBlog;After hours of debugging I found out that when the page is empty of imports from external components in the return for rendering, it works fine and i can even show the data im fetching, but the moment i import a component i get an error. even though the component im importing only contains a static h1 tag still i get this error, also even the line for importing is enough to make the project return an error on that specific route.
how can i prevent this and how am i supposed to find the error when no error is being shown on my server log as well ?