TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function with Next.js and React 18

[RobinaShaheen]

Issue template

You can donate or became a sponsor https://opencollective.com/react-google-maps-api#category-CONTRIBUTE

If you want to ask question, please ask it in Github Discussions, Spectrum.chat or Slack channel

I am experiencing a TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function when using @react-google-maps/api with a Next.js project and React 18.

Please do not post unformatted code into issues, and please do not ask questions. Only real issues, PR's or feature requests are allowed. Minimal reproduction in codesandbox.io is required.

Help wanted

As mentioned in this issue, the author of this project will only accept issues with codesandbox reproduction and PR with solution going forward.

Please provide an explanation of the issue

Your Environment

os: mac/linux/windows/android/ios

node --version

react version

webpack version

@babel version

@react-google-maps/api version

How does it behave?

How should it behave correctly?

Basic implementation of incorrect behavior in codesandbox.com

[RobinaShaheen]

anyone idea to solve this issue

[sdkayy]

Seems this is actually a next issue, and the map being inside of a server component using the Context API, try marking your map component a client component with "use client", just ran into this and found this discussion

[lynvi]

in NextJS adding 'use client' directive in the top of your component file should fix the issue https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs