search

fullstackreact / google-maps-react

Companion code to the "How to Write a Google Maps React Component" Tutorial
https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/
MIT License
1.64k stars 818 forks source link

import Circle not working (see #258) #358

Open ericbenedetto16 opened 5 years ago

ericbenedetto16 commented 5 years ago 
import {
  Map, InfoWindow, Marker, Circle,
} from 'google-maps-react';

JavaScript is throwing:

index.js:1375 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at MapContainer.js:88.
    in MapContainer (at MapContainer.js:139)
    in Unknown (at providerHoc.js:8)
    in Unknown (created by Wrapper)
    in div (created by Wrapper)
    in Wrapper (created by ConnectFunction)
    in ConnectFunction (at AppContainer.js:26)
    in div (created by Context.Consumer)
    in ScreenClassResolver (created by Col)
    in Col (at AppContainer.js:25)
    in div (created by Row)
    in Row (at AppContainer.js:24)
    in div (created by Context.Consumer)
    in ScreenClassProvider (created by Context.Consumer)
    in ScreenClassResolver (created by Container)
    in Container (at AppContainer.js:23)
    in div (at AppContainer.js:22)
    in AppContainer (at AppContainer.js:39)
    in Unknown (at providerHoc.js:8)
    in Unknown (at App.js:12)
    in AppProvider (created by ConnectFunction)
    in ConnectFunction (at App.js:11)
    in Provider (at App.js:10)
    in App (at src/index.js:7)
console.<computed> @ index.js:1375
warningWithoutStack @ react.development.js:188
warning @ react.development.js:623
createElementWithValidation @ react.development.js:1785
render @ MapContainer.js:81
finishClassComponent @ react-dom.development.js:15319
updateClassComponent @ react-dom.development.js:15274
beginWork @ react-dom.development.js:16262
performUnitOfWork @ react-dom.development.js:20279
workLoop @ react-dom.development.js:20320
renderRoot @ react-dom.development.js:20400
performWorkOnRoot @ react-dom.development.js:21357
performWork @ react-dom.development.js:21267
performSyncWork @ react-dom.development.js:21241
batchedUpdates$1 @ react-dom.development.js:21468
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
notifySubscribers @ Provider.js:59
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:214
(anonymous) @ redux-saga-core.esm.js:1421
dispatch @ redux.js:613
(anonymous) @ chunk-e922c950.js:136
(anonymous) @ redux-saga-core.esm.js:484
exec @ redux-saga-core.esm.js:30
flush @ redux-saga-core.esm.js:88
asap @ redux-saga-core.esm.js:45
runPutEffect @ redux-saga-core.esm.js:480
runEffect @ redux-saga-core.esm.js:1210
digestEffect @ redux-saga-core.esm.js:1277
next @ redux-saga-core.esm.js:1167
currCb @ redux-saga-core.esm.js:1257
Promise.then (async)
resolvePromise @ redux-saga-core.esm.js:407
runCallEffect @ redux-saga-core.esm.js:538
runEffect @ redux-saga-core.esm.js:1210
digestEffect @ redux-saga-core.esm.js:1277
next @ redux-saga-core.esm.js:1167
proc @ redux-saga-core.esm.js:1114
(anonymous) @ redux-saga-core.esm.js:595
immediately @ redux-saga-core.esm.js:56
runForkEffect @ redux-saga-core.esm.js:594
runEffect @ redux-saga-core.esm.js:1210
digestEffect @ redux-saga-core.esm.js:1277
next @ redux-saga-core.esm.js:1167
currCb @ redux-saga-core.esm.js:1257
takeCb @ redux-saga-core.esm.js:515
put @ redux-saga-core.esm.js:350
(anonymous) @ redux-saga-core.esm.js:388
exec @ redux-saga-core.esm.js:30
flush @ redux-saga-core.esm.js:88
asap @ redux-saga-core.esm.js:45
chan.put @ redux-saga-core.esm.js:387
(anonymous) @ redux-saga-core.esm.js:1423
(anonymous) @ redux.js:463
push../src/providers/AppProvider.js.AppProvider.getDerivedStateFromProps @ AppProvider.js:22
applyDerivedStateFromProps @ react-dom.development.js:11561
mountClassInstance @ react-dom.development.js:11942
updateClassComponent @ react-dom.development.js:15265
beginWork @ react-dom.development.js:16262
performUnitOfWork @ react-dom.development.js:20279
workLoop @ react-dom.development.js:20320
renderRoot @ react-dom.development.js:20400
performWorkOnRoot @ react-dom.development.js:21357
performWork @ react-dom.development.js:21267
performSyncWork @ react-dom.development.js:21241
requestWork @ react-dom.development.js:21096
scheduleWork @ react-dom.development.js:20909
scheduleRootUpdate @ react-dom.development.js:21604
updateContainerAtExpirationTime @ react-dom.development.js:21630
updateContainer @ react-dom.development.js:21698
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:22011
(anonymous) @ react-dom.development.js:22163
unbatchedUpdates @ react-dom.development.js:21486
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22159
render @ react-dom.development.js:22234
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ sortByKey.js:16
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 53 more frames
react-dom.development.js:57 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `MapContainer`.
    at invariant (http://localhost:3000/static/js/0.chunk.js:15281:19)
    at createFiberFromTypeAndProps (http://localhost:3000/static/js/0.chunk.js:25874:15)
    at createFiberFromElement (http://localhost:3000/static/js/0.chunk.js:25894:19)
    at createChild (http://localhost:3000/static/js/0.chunk.js:27714:32)
    at reconcileChildrenArray (http://localhost:3000/static/js/0.chunk.js:27983:29)
    at reconcileChildFibers (http://localhost:3000/static/js/0.chunk.js:28333:18)
    at reconcileChildren (http://localhost:3000/static/js/0.chunk.js:30185:32)
    at updateFragment (http://localhost:3000/static/js/0.chunk.js:30373:7)
    at beginWork (http://localhost:3000/static/js/0.chunk.js:31515:18)
    at performUnitOfWork (http://localhost:3000/static/js/0.chunk.js:35503:16)
    at workLoop (http://localhost:3000/static/js/0.chunk.js:35544:28)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:15371:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:15420:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:15474:35)
    at replayUnitOfWork (http://localhost:3000/static/js/0.chunk.js:34727:9)
    at renderRoot (http://localhost:3000/static/js/0.chunk.js:35657:17)
    at performWorkOnRoot (http://localhost:3000/static/js/0.chunk.js:36581:11)
    at performWork (http://localhost:3000/static/js/0.chunk.js:36491:11)
    at performSyncWork (http://localhost:3000/static/js/0.chunk.js:36465:7)
    at batchedUpdates$1 (http://localhost:3000/static/js/0.chunk.js:36692:11)
    at Object.notify (http://localhost:3000/static/js/0.chunk.js:43093:7)
    at Subscription.notifyNestedSubs (http://localhost:3000/static/js/0.chunk.js:43135:20)
    at Provider.notifySubscribers (http://localhost:3000/static/js/0.chunk.js:41904:29)
    at Subscription.handleChangeWrapper (http://localhost:3000/static/js/0.chunk.js:43140:12)
    at dispatch (http://localhost:3000/static/js/0.chunk.js:45630:7)
    at http://localhost:3000/static/js/0.chunk.js:2338:22
    at dispatch (http://localhost:3000/static/js/0.chunk.js:46029:28)
    at http://localhost:3000/static/js/0.chunk.js:308:12
    at http://localhost:3000/static/js/0.chunk.js:1401:54
    at exec (http://localhost:3000/static/js/0.chunk.js:947:5)
    at flush (http://localhost:3000/static/js/0.chunk.js:1005:5)
    at asap (http://localhost:3000/static/js/0.chunk.js:962:5)
    at runPutEffect (http://localhost:3000/static/js/0.chunk.js:1397:3)
    at runEffect (http://localhost:3000/static/js/0.chunk.js:2127:7)
    at digestEffect (http://localhost:3000/static/js/0.chunk.js:2194:5)
    at next (http://localhost:3000/static/js/0.chunk.js:2084:9)
    at currCb (http://localhost:3000/static/js/0.chunk.js:2174:7)
invariant @ react-dom.development.js:57
createFiberFromTypeAndProps @ react-dom.development.js:10650
createFiberFromElement @ react-dom.development.js:10670
createChild @ react-dom.development.js:12490
reconcileChildrenArray @ react-dom.development.js:12759
reconcileChildFibers @ react-dom.development.js:13109
reconcileChildren @ react-dom.development.js:14961
updateFragment @ react-dom.development.js:15149
beginWork @ react-dom.development.js:16291
performUnitOfWork @ react-dom.development.js:20279
workLoop @ react-dom.development.js:20320
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
replayUnitOfWork @ react-dom.development.js:19503
renderRoot @ react-dom.development.js:20433
performWorkOnRoot @ react-dom.development.js:21357
performWork @ react-dom.development.js:21267
performSyncWork @ react-dom.development.js:21241
batchedUpdates$1 @ react-dom.development.js:21468
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
notifySubscribers @ Provider.js:59
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:214
(anonymous) @ redux-saga-core.esm.js:1421
dispatch @ redux.js:613
(anonymous) @ chunk-e922c950.js:136
(anonymous) @ redux-saga-core.esm.js:484
exec @ redux-saga-core.esm.js:30
flush @ redux-saga-core.esm.js:88
asap @ redux-saga-core.esm.js:45
runPutEffect @ redux-saga-core.esm.js:480
runEffect @ redux-saga-core.esm.js:1210
digestEffect @ redux-saga-core.esm.js:1277
next @ redux-saga-core.esm.js:1167
currCb @ redux-saga-core.esm.js:1257
Promise.then (async)
resolvePromise @ redux-saga-core.esm.js:407
runCallEffect @ redux-saga-core.esm.js:538
runEffect @ redux-saga-core.esm.js:1210
digestEffect @ redux-saga-core.esm.js:1277
next @ redux-saga-core.esm.js:1167
proc @ redux-saga-core.esm.js:1114
(anonymous) @ redux-saga-core.esm.js:595
immediately @ redux-saga-core.esm.js:56
runForkEffect @ redux-saga-core.esm.js:594
runEffect @ redux-saga-core.esm.js:1210
digestEffect @ redux-saga-core.esm.js:1277
next @ redux-saga-core.esm.js:1167
currCb @ redux-saga-core.esm.js:1257
takeCb @ redux-saga-core.esm.js:515
put @ redux-saga-core.esm.js:350
(anonymous) @ redux-saga-core.esm.js:388
exec @ redux-saga-core.esm.js:30
flush @ redux-saga-core.esm.js:88
asap @ redux-saga-core.esm.js:45
chan.put @ redux-saga-core.esm.js:387
(anonymous) @ redux-saga-core.esm.js:1423
(anonymous) @ redux.js:463
push../src/providers/AppProvider.js.AppProvider.getDerivedStateFromProps @ AppProvider.js:22
applyDerivedStateFromProps @ react-dom.development.js:11561
mountClassInstance @ react-dom.development.js:11942
updateClassComponent @ react-dom.development.js:15265
beginWork @ react-dom.development.js:16262
performUnitOfWork @ react-dom.development.js:20279
workLoop @ react-dom.development.js:20320
renderRoot @ react-dom.development.js:20400
performWorkOnRoot @ react-dom.development.js:21357
performWork @ react-dom.development.js:21267
performSyncWork @ react-dom.development.js:21241
requestWork @ react-dom.development.js:21096
scheduleWork @ react-dom.development.js:20909
scheduleRootUpdate @ react-dom.development.js:21604
updateContainerAtExpirationTime @ react-dom.development.js:21630
updateContainer @ react-dom.development.js:21698
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:22011
(anonymous) @ react-dom.development.js:22163
unbatchedUpdates @ react-dom.development.js:21486
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22159
render @ react-dom.development.js:22234
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ sortByKey.js:16
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 58 more frames
index.js:1375 The above error occurred in one of your React components:
    in div (created by Map)
    in Map (at MapContainer.js:81)
    in MapContainer (at MapContainer.js:139)
    in Unknown (at providerHoc.js:8)
    in Unknown (created by Wrapper)
    in div (created by Wrapper)
    in Wrapper (created by ConnectFunction)
    in ConnectFunction (at AppContainer.js:26)
    in div (created by Context.Consumer)
    in ScreenClassResolver (created by Col)
    in Col (at AppContainer.js:25)
    in div (created by Row)
    in Row (at AppContainer.js:24)
    in div (created by Context.Consumer)
    in ScreenClassProvider (created by Context.Consumer)
    in ScreenClassResolver (created by Container)
    in Container (at AppContainer.js:23)
    in div (at AppContainer.js:22)
    in AppContainer (at AppContainer.js:39)
    in Unknown (at providerHoc.js:8)
    in Unknown (at App.js:12)
    in AppProvider (created by ConnectFunction)
    in ConnectFunction (at App.js:11)
    in Provider (at App.js:10)
    in App (at src/index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

I also noticed in my node_modules directory google-maps-react/dist/does not include components/Circle.js and index.js does not include global.Circle

However, the git repository appears to have Circle.js and global.Circle (https://github.com/fullstackreact/google-maps-react/tree/master/dist/components)

Any ideas???

isaacs-gh commented 5 years ago

I ended up installing the master branch module via git: $ npm install --save fullstackreact/google-maps-react#master

Ciip1996 commented 5 years ago

Perhaps you should consider following this solution. I can confirm it works for me :D

https://github.com/fullstackreact/google-maps-react/issues/300#issuecomment-451765622