Everything was running smoothly with my next js app during development and build phases. However, upon trying to deploy it on Vercel, I encountered an error when calling the page that uses my mapView component:
An application error has occurred: a client-side exception (check browser console for more details).
Here's the complete log from the Vercel app:
Additionally, this is the code snippet of my map component:
import { GoogleMap, Marker, MarkerClusterer, useJsApiLoader } from '@react-google-maps/api'
import { useCallback, useState } from 'react'
import SpotCard from './spots/SpotCard'
export const MapView = ({ data }) => {
// Component implementation
}Despite searching for a solution since yesterday, I have not been able to resolve this issue yet. If anyone has faced a similar problem before and can offer some help, I would greatly appreciate it.
Thank you.
EDIT: There is a possibility that the problem lies within the Content Security Policy. Here is the configuration:
const ContentSecurityPolicy = `
// CSP configuration
`;Another potential culprit could be the eslint configuration:
// Eslint config setup
module.exports = {
// Configuration settings
};