Неопределенная переменная в GoogleMap компоненте JSX

Question

В моем приложении, у меня есть следующий фрагмент кода с самого начала моего компонента Google Map JSX (который был написан кем-то еще):

import React from 'react'; 
import { Button } from 'react-bootstrap'; 
import {GoogleMapLoader, GoogleMap, Marker, InfoWindow, DirectionsRenderer} from 'react-google-maps'; 
import { 
    default as canUseDOM, 
} from "can-use-dom"; 
const DirectionsService = new google.maps.DirectionsService(); 

Когда я использую на стороне клиента рендеринга и выполнения этого кода на клиенте, он работает без ошибок с ожидаемым поведением. Однако, когда я перейти на стороне сервера визуализации с использованием ReactDOM.renderToString(), я сталкиваетесь следующие ошибки:

var DirectionsService = new google.maps.DirectionsService(); 
          ^
ReferenceError: google is not defined 

Глядя на код в деталях. Переменная «google» в моем коде действительно не определена нигде раньше.

Мои вопросы:

1. Где переменная "Google" определяется?
2. Почему рендеринг на стороне клиента выполняется нормально, а на стороне сервера возникает ошибка?

спасибо, что посмотрели.

Answer 1

Переменная google исходит от https://maps.googleapis.com/maps/api/js, которая равно loaded асинхронно на клиенте.

На сервере этот скрипт не загружен, и все ломается. Похоже, что component you are using не полностью изоморфен, поэтому он будет работать только на стороне клиента.

Я использовал google-map-react в прошлом, очень рекомендуется и полностью изоморфен.