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.dev/debug-html，但是我仍然遇到相同的问题。

已经有一段时间了，因为我一直在寻找解决方案，但没有成功！

Gatsbyjs中的OpenLayers构建失败

0 个答案: