在服务器端渲染中反应传单地图错误

Question

已解决 --- 请阅读更新 2

你好，我在使用 react-leaflet map 的 react starter kit 中有这个错误

这就像 github 模块示例，但我不知道有什么问题！！！我认为SSR有问题

react 版本：16.x 和 react 入门套件

更新 1

ReferenceError: window is not defined
    at D:\project\react-starterkit\node_modules\leaflet\src\core\Util.js:217:24
    at version (D:\project\react-starterkit\node_modules\leaflet\dist\leaflet-src.js:7:65)
    at Object.<anonymous> (D:\project\react-starterkit\node_modules\leaflet\dist\leaflet-src.js:10:2)
    at Module._compile (module.js:635:30)
    at Module._extensions..js (module.js:646:10)
    at Object.require.extensions.(anonymous function) [as .js] (D:\project\react-starterkit\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)

已通过对最新版本 16.x 的更新反应解决

TypeError: (0 , _react.createContext) is not a function
    at Object.<anonymous> (D:\project\react-starterkit\node_modules\react-leaflet\lib\context.js:18:47)
    at Module._compile (module.js:635:30)
    at Module._extensions..js (module.js:646:10)
    at Object.require.extensions.(anonymous function) [as .js] (D:\project\react-starterkit\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\project\react-starterkit\node_modules\react-leaflet\lib\index.js:5:16)

这是我的代码：

import React from 'react';
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);

我自己解决了更新 2

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import leafletCss from '!isomorphic-style-loader!css-loader?modules=false!leaflet/dist/leaflet.css'; //if use isomorphic-style-loader
import s from './GenerateMap.css';

let RL = false;
let Map = false;
let TileLayer = false;
let Marker = false;
let Popup = false;
if (process.env.BROWSER) {
  RL = require('react-leaflet');
  Map = RL.Map;
  TileLayer = RL.TileLayer;
  Marker = RL.Marker;
  Popup = RL.Popup;
}

class GenerateMap extends React.Component {
  render() {
    const position = [51.505, -0.09]

    return (
      <div className={s.root}>
        {process.env.BROWSER && (
          <Map style={{width:'100%',height: '500px'}} center={position} zoom={13}>
            <TileLayer
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            />
            <Marker position={position} icon=''>
              <Popup>A pretty CSS3 popup.<br />Easily customizable.</Popup>
            </Marker>
          </Map>
        )}
      </div>
    );
  }
}

export default withStyles(s, leafletCss)(GenerateMap);

Answer 1

从堆栈跟踪中，我看到 react-leaflet 正在使用 createContext()，它是 React Context API 的一部分。这仅适用于React 16.3。

您是否检查过您正在使用的react-leaflet 中的version？您可能正在使用依赖于 React 16.3 的版本。您可以尝试降级到react-leaflet 1.9.1 看看是否可行。

更新答案：

window is not defined 最有可能发生在您的代码尝试访问全局变量 window 时，该变量仅在您的代码在浏览器（而非 SSR）中运行时定义。检查您的代码以查看该错误是否因您的代码而发生。如果是react-leaflet引起的，请往下看……

经过更多搜索，react-leaflet 似乎没有考虑到服务器端渲染。您可以尝试检查react-leaflet-universal 来实现它。如果一切都失败了，您可能需要为传单构建自己的包装器来实现这一点。