Using <Polygon> in react-google-maps - reactjs

Question

import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
import shuffle from 'shuffle-array';
import { Polygon } from "react-google-maps";
export default class MapsItem extends React.Component {
render() {
const coords = [
{ lat: 0, lng: 0 },
{ lat: 1, lng: 1 },
{ lat: 2, lng: 2 }
];
const api_key="myapikeyhere"
return (
<div className="col-sm-12"><Polygon key={api_key} path={cords}> </Polygon> </div>
)
}
}
I have the following code; where I'm trying to draw the polygon for the map. Issue is it throws me the error called :
Uncaught TypeError: Super expression must either be null or a function, not undefined
Whenever I try an import Polygon or any component related to react-google-maps.
Am I using it right? Also how would I pass my API_KEY. I was assuming just passing the key prop to the Polygon. Not sure.
My package.json looks like this:
{
"name": "djreact",
"version": "0.0.1",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.6.5",
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"eslint": "^2.2.0",
"react": "^0.14.7",
"react-hot-loader": "^1.3.0",
"redux-devtools": "^3.1.1",
"webpack": "^1.12.13",
"webpack-bundle-tracker": "0.0.93",
"webpack-dev-server": "^1.14.1",
"sass-loader": "^3.2.0",
"css-loader": "^0.23.1",
"eslint-plugin-react": "^5.0.1",
"node-sass": "^3.7.0",
"style-loader": "^0.13.1"
},
"dependencies": {
"classnames": "^2.2.5",
"es6-promise": "^3.1.2",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.5.1",
"radium": "^0.16.6",
"react-cookie": "^0.4.5",
"react-dom": "^0.14.7",
"react-google-maps": "^9.4.5",
"react-redux": "^4.4.0",
"redux": "^3.3.1",
"redux-thunk": "^1.0.3",
"shuffle-array": "^1.0.1"
}
}

Answer 1

Update React, copy and paste the below, then run npm install or you could run npm update
{
"name": "djreact",
"version": "0.0.1",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.6.5",
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"eslint": "^2.2.0",
"react": "16.3.1",
"react-hot-loader": "^1.3.0",
"redux-devtools": "^3.1.1",
"webpack": "^1.12.13",
"webpack-bundle-tracker": "0.0.93",
"webpack-dev-server": "^1.14.1",
"sass-loader": "^3.2.0",
"css-loader": "^0.23.1",
"eslint-plugin-react": "^5.0.1",
"node-sass": "^3.7.0",
"style-loader": "^0.13.1"
},
"dependencies": {
"classnames": "^2.2.5",
"es6-promise": "^3.1.2",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.5.1",
"radium": "^0.16.6",
"react-cookie": "^0.4.5",
"react-dom": "16.3.1",
"react-google-maps": "^9.4.5",
"react-redux": "^4.4.0",
"react-scripts": "1.1.0"
"redux": "^3.3.1",
"redux-thunk": "^1.0.3",
"shuffle-array": "^1.0.1"
}
}