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

Question

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

你好，我在带有 react-leaflet 映射的 react 入门套件中遇到了这个错误

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

有问题

反应版本：16.x 和反应入门套件

已更新 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);

UPDATE 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 来实现它。如果一切都失败了，您可能需要为传单构建自己的包装器来实现这一点。

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

react leaflet map error in server side rendering

reactjs

server-side-rendering

react-leaflet

react-starter-kit