Fixing Marker component
Npm Package: @react-google-maps/api
I was working with React Google Map Api today and I found myself figuring and scratching my head on why wasn't the Marker showing up on the app? I configured literally everything on the file that I was working on and that included: checking Google Map API, rechecking all the code, rechecking typos, rechecking imports.
All that but it still doesn't work. And you know what's worse? When I try to console.log(), the Marker component just randomly show up and it made me question myself and the code that I was writing.
Anyway, if your React/NextJS project has React version of 18, it turns out you have to remove StrictMode from your project in order for the Marker component to show up.
Removing StrictMode from ReactJS
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
to
ReactDOM.render(
<App />
document.getElementById('root')
);
Removing StrictMode from NextJS
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false
}
After that your code should work and the Marker component should appear!
Top comments (8)
This seems an issue on the lib you used rather than an issue in your application.
Disabling strict mode is a no-go solution to me, maybe we need to check this lib to find the error.
Can you please provide your package.json to see the dependencies and their versions?
Can you also please try to put back the strict mode and run the app "production-like" to see if the issue apears just on development or if it does appear in production as well?
(If you've the app in a public repo that will do).
Thank you!
"@react-google-maps/api": "^2.12.1" is the version of the package I am currently using. Unfortunately I cannot share this repo because it's my company's code but I've tried running build with strictmode on and surprisingly work! Thanks!
😂😂 something else you did make it work, wondering what
It seems to be a development issue, in production mode the marker is visible because Next-JS disables react strict mode in production.
Hey,
It seems interesting. May I know which package you were using for map?
npmjs.com/package/@react-google-ma... Here it is
This is strange. I'm also using this package in my nextjs project but I did't do any thing with
reactStrictMode🤔.If your nextjs project has react version below 18 it'll be fine.