I’m trying to add a React map component to my project but run into an error. I’m using Fullstack React’s blog post as a reference. I tracked down where the error gets thrown in google_map.js line 83:
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
Here is my map component so far. The page loads just fine (without a map) when I comment out lines 58-60, the last three lines. edit: I made the changes that @Dmitriy Nevzorov suggested and it still gives me the same error.
import React from 'react' import GoogleApiComponent from 'google-map-react' export class LocationsContainer extends React.Component { constructor() { super() } render() { const style = { width: '100vw', height: '100vh' } return ( <div style={style}> <Map google={this.props.google} /> </div> ) } } export class Map extends React.Component { componentDidUpdate(prevProps, prevState){ if (prevProps.google !== this.props.google){ this.loadMap(); } } componentDidMount(){ this.loadMap(); } loadMap(){ if (this.props && this.props.google){ const {google} = this.props; const maps = google.maps; const mapRef = this.refs.map; const node = ReactDOM.findDOMNode(mapRef); let zoom = 14; let lat = 37.774929 let lng = 122.419416 const center = new maps.LatLng(lat, lng); const mapConfig = Object.assign({}, { center: center, zoom: zoom }) this.map = new maps.Map(node, mapConfig) } } render() { return ( <div ref='map'> Loading map... </div> ) } } export default GoogleApiComponent({ apiKey: MY_API_KEY })(LocationsContainer)
And here is where this map component gets routed in main.js:
import {render} from 'react-dom'; import React from 'react'; import Artists from './components/Artists' import { Router, Route, Link, browserHistory } from 'react-router' import Home from './components/HomePage' import Gallery from './components/ArtGallery' import ArtistPage from './components/ArtistPage' import FavsPage from './components/FavsPage' import LocationsContainer from './components/Locations' //Create the route configuration render(( <Router history={browserHistory}> <Route path="/" component={Home} /> <Route path="locations" component={LocationsContainer} /> <Route path="artists" component={Artists} /> <Route path="gallery" component={Gallery} /> <Route path="favorites" component={FavsPage} /> <Route path=":artistName" component={ArtistPage} /> </Router> ), document.getElementById('app'))