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

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);

更新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的

版本

吗？您可能使用依赖于 React 16.3 的版本。您可以尝试降级到

react-leaflet

1.9.1 看看是否有效。

更新答案：

window

未定义是当您的代码尝试访问全局变量

window

时最有可能发生的错误，该变量仅在您的代码在浏览器（而不是SSR）中运行时定义。检查您的代码，看看该错误是否是由于您的代码而发生的。如果是由

react-leaflet

引起的，请阅读下文...

经过更多搜索，似乎

react-leaflet

并不是在考虑服务器端渲染的情况下构建的。您可以尝试检查 react-leaflet-universal 来实现它。如果所有其他方法都失败，您可能需要构建自己的传单包装器才能实现此目的。

Answer 2

使用 Nextjs 进行动态导入：

`const DynamicMap = dynamic(() => import("@/components/MapComponent"), { ssr: false });

return (
    <div>
      {/* Load immediately */}
      <DynamicMap />
    <div />
)

`