react-google-maps icon indicating copy to clipboard operation
react-google-maps copied to clipboard
verified publisher icon tomchentw

Your GMap API Key on your website is not working anymore

Open guidoholz opened this issue 4 years ago • 2 comments

guidoholz avatar Feb 09 '21 11:02 guidoholz

tps://reactjs.org/link/unsafe-component-lifecycles for details.

  • Move code with side effects to componentDidMount, and set initial state in the constructor.
  • Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: withScriptjs(withGoogleMap(_c)) printWarning @ react-dom.development.js:67 warn @ react-dom.development.js:34 push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:11524 flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:23822 commitRootImpl @ react-dom.development.js:23005 unstable_runWithPriority @ scheduler.development.js:646 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22990 performSyncWorkOnRoot @ react-dom.development.js:22329 scheduleUpdateOnFiber @ react-dom.development.js:21881 updateContainer @ react-dom.development.js:25482 (anonymous) @ react-dom.development.js:26021 unbatchedUpdates @ react-dom.development.js:22431 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020 render @ react-dom.development.js:26103 (anonymous) @ index.js:6 ./src/index.js @ index.js:7 webpack_require @ bootstrap:851 fn @ bootstrap:150 1 @ index.js:7 webpack_require @ bootstrap:851 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 react-dom.development.js:67 Warning: componentWillMount has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

  • Move code with side effects to componentDidMount, and set initial state in the constructor.
  • Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: withGoogleMap(_c) printWarning @ react-dom.development.js:67 warn @ react-dom.development.js:34 push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:11524 flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:23822 commitRootImpl @ react-dom.development.js:23005 unstable_runWithPriority @ scheduler.development.js:646 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22990 performSyncWorkOnRoot @ react-dom.development.js:22329 (anonymous) @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:646 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21893 enqueueSetState @ react-dom.development.js:12467 push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:365 handleLoaded @ withScriptjs.js:116 wrapper @ _createBind.js:23 callback @ script.js:49 el.onload.el.onerror.el. @ script.js:83 load (async) create @ script.js:78 loading @ script.js:70 (anonymous) @ script.js:32 every @ script.js:27 each @ script.js:31 (anonymous) @ script.js:56 setTimeout (async) $script @ script.js:55 componentDidMount @ withScriptjs.js:150 commitLifeCycles @ react-dom.development.js:20663 commitLayoutEffects @ react-dom.development.js:23426 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23151 unstable_runWithPriority @ scheduler.development.js:646 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22990 performSyncWorkOnRoot @ react-dom.development.js:22329 scheduleUpdateOnFiber @ react-dom.development.js:21881 updateContainer @ react-dom.development.js:25482 (anonymous) @ react-dom.development.js:26021 unbatchedUpdates @ react-dom.development.js:22431 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020 render @ react-dom.development.js:26103 (anonymous) @ index.js:6 ./src/index.js @ index.js:7 webpack_require @ bootstrap:851 fn @ bootstrap:150 1 @ index.js:7 webpack_require @ bootstrap:851 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1

noumanhabib avatar Feb 24 '21 05:02 noumanhabib

The repo of this project is unmaintained more than 3 years, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.app

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.app/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api 
Our Slack channel: https://join.slack.com/t/react-google-maps-api/shared_invite/enQtODc5ODU1NTY5MzQ4LTBiNTYzZmY1YmVjYzJhZThkMGU0YzUwZjJkNGJmYjk4YjQyYjZhMDk2YThlZGEzNDc0M2RhNjBmMWE4ZTJiMjQ

Enjoy!

JustFly1984 avatar Apr 21 '21 03:04 JustFly1984