在Gatsbyjs中使用OpenLayers构建失败的案例。

Question

我在Gatsbyjs中使用OpenLayer.我有一个简单的组件，可以制作一个地图。

class MapView extends Component {
  constructor(props) {
    super(props);

    this.state = { 
        center: [0, 0], 
        zoom: 1 
    };

    this.olmap = new Map({
      target: null,
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: this.state.center,
        zoom: this.state.zoom
      })
    });
  }

  componentDidMount() {
    this.olmap.setTarget("map1");
  }

  render() {
    return (
      <div id="map1" style={{ width: "100%", height: "360px" }}>
      </div>
    );
  }
}

export default MapView;

在开发模式下一切都能正常工作，但在构建时却出现了一个错误。

 ERROR #95312 

"window" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html


  38 |  * @api
  39 |  */
> 40 | export var DEVICE_PIXEL_RATIO = window.devicePixelRatio || 1;
     |        ^
  41 | 
  42 | 
  43 | /**


  WebpackError: ReferenceError: window is not defined

  - has.js:40 Module../node_modules/ol/has.js
    node_modules/ol/has.js:40:8

  - MapBrowserEventHandler.js:1 Module../node_modules/ol/MapBrowserEventHandler.js
    node_modules/ol/MapBrowserEventHandler.js:1:1

  - PluggableMap.js:1 Module../node_modules/ol/PluggableMap.js
    node_modules/ol/PluggableMap.js:1:1

  - Map.js:1 Module../node_modules/ol/Map.js
    node_modules/ol/Map.js:1:1

  - page-2.js:1 Module../src/pages/page-2.js
    src/pages/page-2.js:1:1

我按照文档 https:/gatsby.devdebug-html。 但我还是有同样的问题。

已经有一段时间了，我一直在寻找解决方法，但没有成功！我在Gatsbyjs中使用OpenLayer。