Google-maps-react: TypeError: Cannot read property 'array' of undefined when trying to use google-maps-react

[abhaychitnis]

I am new to ReactJS, but familiar with React Native. I am trying to to get a basic map component to be displayed.

My map component is

WaterMapView.js

import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';

export class WaterMapView extends Component {
    render () {
        console.log(' I am here ');
        return (
            <Map
                google={this.props.google}
                style={styles.mapStyle}
                initialCenter={{
                    lat: 40.854885,
                    lng: -88.081807
                        }}
                zoom={15}
            />
        )
    }
}

const styles = {
    mapStyle: {
        height: '100%',
        width: '100%'
    }
}
export default GoogleApiWrapper({
  apiKey: 'AIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
})(WaterMapView)

This component is embedded in MainDashboard.js as follows :

import React, { Component } from 'react';
import windowSize from 'react-window-size';
import WaterMapView from './WaterMapView';

class MainDashboard extends Component {
  render () {
  const height = this.props.windowHeight;
  const {
      containerStyle,
      headerStyle,
      navigationStyle,
      mainPageStyle,
      eventPageStyle,
      mapPageStyle,
      mapDisplayStyle,
      mapPropertiesStyle
    } = styles; 

  return (
    <div style={{ ...containerStyle, height }} >
      <div style={headerStyle} >
      </div>
      <div style={navigationStyle} >
      </div>
      <div style={mainPageStyle} >
        <div style={eventPageStyle} >
        </div>
        <div style={mapPageStyle} >
            <div style={mapDisplayStyle} >
                <WaterMapView />
            </div>
            <div style={mapPropertiesStyle} >
            </div>

        </div>
      </div>
    </div>
    );
  };
};

My App.js component is :

import React from 'react';
import MainDashboard from './MainDashboard'; 

const App = () => {
        return (
            <div>
                <MainDashboard />
            </div>
        )
};

export default App

And index.js is :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './Components/App';
import registerServiceWorker from './registerServiceWorker';


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

I am using React version 16.0.0 and google-maps-react version 1.1.0

I get an error accompanied by a dump of code. The error is :

TypeError: Cannot read property 'array' of undefined

I am not including the dump in this post. I can add that if required.

The problem seems very basic as the I do not even see the console.log statement 'I am here' in WaterMapView.js component.

Let me know what am I missing.

[vegtelenseg]

Have you tried <WaterMapView/> instead of just WaterMapView?

[abhaychitnis]

Yes. This was pointed out by someone else as well. I have corrected it. However the error remains same. I am modifying my post accordingly

[ghost]

Hi, having the same issue in my project.
I tried some debug and found out that the error happens just by including the map component:

import {Map, GoogleApiWrapper} from 'google-maps-react';

But I can't find the solution..

[median-man]

Hello,
I'm experiencing the same issue with a simple test case.

Error:

TypeError: Cannot read property 'array' of undefined
(anonymous function)
X:/Users/John/Documents/code/WanderSpark/wander-spark/client/node_modules/google-maps-react/dist/components/Polygon.js:190
  187 | }(_react2.default.Component);
  188 | 
  189 | Polygon.propTypes = {
> 190 |   paths: _react.PropTypes.array,
  191 |   strokeColor: _react.PropTypes.string,
  192 |   strokeOpacity: _react.PropTypes.number,
  193 |   strokeWeight: _react.PropTypes.number,

  | (anonymous) | @ | Polygon.js:190
-- | -- | -- | --
  | ./node_modules/google-maps-react/dist/components/Polygon.js.Object.defineProperty.value | @ | Polygon.js:3
  | ./node_modules/google-maps-react/dist/components/Polygon.js | @ | Polygon.js:13
  | __webpack_require__ | @ | bootstrap c764c94…:669
  | fn | @ | bootstrap c764c94…:87
  | ./node_modules/google-maps-react/dist/index.js.Object.defineProperty.value | @ | index.js:3
  | ./node_modules/google-maps-react/dist/index.js | @ | index.js:13
  | __webpack_require__ | @ | bootstrap c764c94…:669
  | fn | @ | bootstrap c764c94…:87
  | ./src/containers/GoogleApiTest.js | @ | App.js:23
  | __webpack_require__ | @ | bootstrap c764c94…:669
  | fn | @ | bootstrap c764c94…:87
  | ./src/App.js | @ | App.css?9a66:26
  | __webpack_require__ | @ | bootstrap c764c94…:669
  | fn | @ | bootstrap c764c94…:87
  | ./src/index.js | @ | index.css?f255:26
  | __webpack_require__ | @ | bootstrap c764c94…:669
  | fn | @ | bootstrap c764c94…:87
  | 0 | @ | registerServiceWorker.js:108
  | __webpack_require__ | @ | bootstrap c764c94…:669
  | (anonymous) | @ | bootstrap c764c94…:715
  | (anonymous) | @ | bundle.js:719

Test component - GoogleApiTest.js:

import React, { Component } from 'react';
import { GoogleApiWrapper } from 'google-maps-react';

class GoogleApiTest extends Component {
  render() { return <div>Hi Google</div>; }
}

export default GoogleApiTest;

[ChrisSargent]

Pretty sure this is related to proptypes being deprecated in React 16: https://github.com/facebook/prop-types

[Muedgar]

I am using react-native-slideshow but I get this error:
Cannot read property 'arrayOf' of undefined.

I did as some answer suggested:
// install prop-types module
// then import it in the codebase
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Slideshow from 'react-native-slideshow';

export default class App extends Component {

render() {
return (
dataSource={[
{ url:'http://placeimg.com/640/480/any' },
{ url:'http://placeimg.com/640/480/any' },
{ url:'http://placeimg.com/640/480/any' }
]}/>
);
}
}

But I am still getting the same error:
Help me please