ruby - 无法渲染仅在 Heroku 上导入 google-maps-react 的反应组件

Question

我有一个使用 google-maps-react api 的 react-in-rails 应用程序。该应用程序在本地运行良好，但是当部署到 heroku 时，导入 google-maps-react 的任何组件都不会呈现。由于这通常是大多数用户的登录页面，因此根本无法访问该应用程序。

删除所有导入或呈现 google-maps-react 的组件后，应用程序将正确部署。

import React from "react"
import MapContainer from "./MapContainer"
import StoreList from './StoreList'

class FindBar extends React.Component {
  render () {
    const {stores, openTab, success} = this.props
    return (
      <div className="findbar" >
        <div className="mapcomponent">
          <MapContainer
            stores={stores}
            openTab={openTab}
            success={success}
          />
        </div>
        <br/>
        <StoreList
          stores={stores}
          openTab={openTab}
        />
        {this.props.success &&
            <Redirect to="/user_home/opentabs" />
        }
      </div>
    );
  }
}

export default FindBar

---

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

import UserHome from './UserHome.js'
import StoreMarkerWindow from './StoreMarkerWindow.js'
import InfoWindowEx from './InfoWindowEx.js'

const mapStyles = {
  width: '100%',
  height: '100vh',
};

class MapContainer extends Component {
    constructor(props) {
        super(props)
          this.state = {
            showingInfoWindow: false,
            activeMarker: {},
            selectedPlace: {},
            address: [], 
            location: {},
            displayMarkers: [],
            success: false,
          }
    }

    componentDidMount = () => {
     this.fetchMarkers()  
    }

    componentDidUpdate = (prevProps) => {
      if (prevProps.stores === this.props.stores){
        return true
      }
      this.fetchMarkers()
    }

    openTab = () => {
      console.log(this.state.selectedPlace.storeId)
      // this.props.openTab(this.state.selectedPlace.storeId)
    }

    onClick = (props, marker, e) => {
      this.setState({
        selectedPlace: props,
        activeMarker: marker,
        showingInfoWindow: true
      })
    }

    onClose = props => {
      if (this.state.showingInfoWindow) {
        this.setState({
          showingInfoWindow: false,
          activeMarker: null
        });
      }
    }



    fetchMarkers = () => {
      const newMarkers = []
      this.props.stores.map((store, index) => {
        const location = `${store.address1}, ${store.city}, ${store.state}, ${store.zip}`
        this.geocodeAddress(location)
        .then((geoco)=>{
           newMarkers.push({lat: geoco.lat, 
                            lng: geoco.lng, 
                            storeId: store.id, 
                            name: store.establishmentname,
                            location: location,
                            info: store.additionalinfo,

           })
           this.setState({ displayMarkers:newMarkers})
       })
      })
    }

    // create a function that maps stores.address, stores.city, stores.state, stores.zipcode
    // and returns it to the geocodeAddress and then geocodeAddress returns it to 
    // the displayMarkers 

    geocodeAddress = (address) => {
      const  geocoder = new google.maps.Geocoder()
      return new Promise((resolve, reject) => {
        geocoder.geocode({'address': address}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
          resolve(results[0].geometry.location.toJSON())
         } else {
          reject()
          }
      })
      })

    }


  render() {
    const{
           activeMarker,
           showingInfoWindow,
           selectedPlace,
           onMapOver,
    }=this.props

    return (
      <div className="mapContainer" style={mapStyles}>
        <Map
          google={this.props.google}
          onMouseover={this.onMapOver}
          zoom={14}
          style={mapStyles}
          initialCenter={{
           lat: 32.7091,
           lng: -117.1580
          }}
        >    
        {this.state.displayMarkers.map((coordinates, index) => {
          const{storeId, lat, lng, name, location, info} = coordinates
          return (
            <Marker onClick={this.onClick}
              key={index}
              id={storeId}
              name={name}
              position = {{lat, lng}}
              location={location}
              info= {info}
            >
            </Marker>
          )
        })}
        <InfoWindowEx
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onClose}
        >
          <div>
            <StoreMarkerWindow 
              name={this.state.selectedPlace.name}
              location={this.state.selectedPlace.location}
              info={this.state.selectedPlace.info}
              id={this.state.selectedPlace.id}
              openTab={this.props.openTab}
              />
          </div>
        </InfoWindowEx>
        </Map>
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'xxxx'
})(MapContainer);

---

TypeError: t is not a function
    at Object.a (windowOrGlobal.js:18)
    at Object.<anonymous> (windowOrGlobal.js:5)
    at Object.<anonymous> (windowOrGlobal.js:5)
    at n (bootstrap:19)
    at Object.<anonymous> (ScriptCache.js:3)
    at n (bootstrap:19)
    at Object.<anonymous> (GoogleApiComponent.js:5)
    at n (bootstrap:19)
    at Object.<anonymous> (index.js:5)
    at n (bootstrap:19)