Question

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

你好，我在带有react-leaflet map的react入门工具包中遇到此错误

这就像github模块的例子，但我不知道是什么问题！！！我认为SSR存在问题

反应版本：16.x和React Starter Kit

已更新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是在您的代码尝试访问全局变量window时最有可能发生的错误，该错误仅在代码在浏览器（而非SSR）中运行时定义。检查您的代码以查看是否由于您的代码而发生了该错误。如果是由react-leaflet引起的，请阅读以下...

经过更多搜索之后，看来react-leaflet并不是在考虑服务器端渲染的情况下构建的。您可以尝试检查react-leaflet-universal来实施它。如果所有其他方法均失败，则可能需要为传单构建自己的包装器以实现此目的。

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

1 个答案: