React-leaflet: Error window is not defined

[samankhademi]

hello , i have this error in SSR
react 15.x react starter kit

ReferenceError: window is not defined

  - Util.js:217 
    [react-starterkit]/[leaflet]/src/core/Util.js:217:24

  - leaflet-src.js:7 version
    [react-starterkit]/[leaflet]/dist/leaflet-src.js:7:65

  - leaflet-src.js:10 Object.<anonymous>
    [react-starterkit]/[leaflet]/dist/leaflet-src.js:10:2

  - node.js:152 Object.require.extensions.(anonymous function) [as .js]
    [react-starterkit]/[babel-register]/lib/node.js:152:7

here is my code:

import React from 'react';
import L from 'leaflet';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Home.css';

class Home extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    }
  }
  render() {
    const position = [this.state.lat, this.state.lng]
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    );
  }
}

export default withStyles(s)(Home);

[samankhademi]

also i try this

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Home.css';
if (process.env.BROWSER) {
  var L = require("leaflet");
  var Map = require('react-leaflet').Map;
  var TileLayer = require('react-leaflet').TileLayer;
  var Marker = require('react-leaflet').Marker;
  var Popup = require('react-leaflet').Popup;
}
class Home extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    }
  }
  render() {
    const position = [this.state.lat, this.state.lng]
    return (
      <div>
        {process.env.BROWSER && (
          <Map center={position} zoom={this.state.zoom}>
            <TileLayer
              attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Marker position={position}>
              <Popup>
                A pretty CSS3 popup. <br /> Easily customizable.
              </Popup>
            </Marker>
          </Map>
        )}
      </div>
    );
  }
}

export default withStyles(s)(Home);

and i get this error in CSR

Unhandled Rejection (TypeError): Object(...) is not a function
Object../node_modules/react-leaflet/es/context.js
D:\project\react-starterkit\node_modules\react-leaflet\es\context.js:8
5 | // $FlowFixMe: import
   6 | forwardRef } from 'react';
   7 | 
>  8 | var _createContext = createContext({}),
   9 |     Consumer = _createContext.Consumer,
  10 |     Provider = _createContext.Provider;
  11 | 

Object../node_modules/react-leaflet/es/index.js
D:\project\react-starterkit\node_modules\react-leaflet\es\index.js:1
> 1 | export { LeafletConsumer, LeafletProvider, withLeaflet } from './context';
  2 | 
  3 | export { default as AttributionControl } from './AttributionControl';
  4 | export { default as Circle } from './Circle';

Object../src/routes/home/Home.js
D:\project\react-starterkit\src\routes\home\Home.js:6
  3 | import s from './Home.css';
  4 | if (process.env.BROWSER) {
  5 |   const L = require("leaflet");
> 6 |   var Map = require('react-leaflet').Map;
  7 |   var TileLayer = require('react-leaflet').TileLayer;
  8 |   var Marker = require('react-leaflet').Marker;
  9 |   var Popup = require('react-leaflet').Popup;

[samankhademi]

update in: https://stackoverflow.com/questions/51265189/react-leaflet-map-error-in-server-side-rendering

[PaulLeCam]

SSR is not supported by Leaflet.