Gatsbyjs中OpenLayers的构建失败

我在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