TypeError when using with OpenLayers 4.

[zion]

Im trying to just follow the basic blueprint of the source files but still getting this error...

Also found this question on stackoverflow

react-openlayers.umd.js:563 Uncaught TypeError: a.V is not a function
    at Hv.k.Nf (react-openlayers.umd.js:563)
    at eh (react-openlayers.umd.js:558)
    at Hv.k.Lf (react-openlayers.umd.js:563)
    at react-openlayers.umd.js:562
    at Array.forEach (<anonymous>)
    at D.k.forEach (react-openlayers.umd.js:460)
    at fh.k.Lf (react-openlayers.umd.js:562)
    at G.k.hp (react-openlayers.umd.js:702)
    at G.<anonymous> (react-openlayers.umd.js:689)

Here is the code...

import React from 'react';
import * as ReactDom from 'react-dom';
import * as ol from 'ol';
import {
  interaction, layer, custom, control, //name spaces
  Interactions, Overlays, Controls,     //group
  Map, Layers, Overlay, Util    //objects
} from "react-openlayers";

// var iconFeature = new ol.Feature(new ol.geom.Point([0, 0]));
// var source = new ol.source.Vector({features: [iconFeature]});
// var marker = new custom.style.MarkerStyle(
//   'https://openlayers.org/en/v4.0.1/examples/data/icon.png'
// );

export default class MapView extends React.Component {
  constructor(props) {
    super(props);
  }

  showPopup = (evt) => {
    this.overlayComp.overlay.setPosition(evt.coordinate);
    var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');

    this.popupComp.setContents(
      `<p>You clicked here:</p><code> ${lonlat[0]}, ${lonlat[1]}</code>`
    );
    this.popupComp.show();
  }

  render(){
    debugger;
    return (
      <div>
      <Map onClick={this.showPopup}>
        <Layers>
          <layer.Tile source={new ol.source.Stamen({ layer: 'watercolor' })}/>
        </Layers>
        <Overlays>
          <Overlay ref={comp => this.overlayComp = comp}>
            <custom.Popup ref={comp => this.popupComp = comp}>
            </custom.Popup>
          </Overlay>
        </Overlays>
      </Map>
      </div>
    );
  }
}

I did notice that the ol npm project has a specific way of importing the modules, and its different than this repo imports them, but I have tried both ways and am at a loss.

Here is the package.json if it helps, note I am using create-react-app:

{
  "name": "k51-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "ol": "^4.3.4",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-openlayers": "^0.2.1",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "react-scripts": "1.0.13"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

[jahed]

The README says it strictly supports OpenLayers 3. I'd guess moving to support OpenLayers 4 will be a major undertaking.

[EvgeneOskin]

I had the same issue with TypeError.

The README says it supports OpenLayers 3+ – it means 3 and greater 🙂. The supported OpenLayers version was been discussed in #27.

To be precise this library supports OpenLayers 4.0 and works well with this version, but the issue appears with OpenLayers 4.1 and greater.

[omer72]

any news regarding this? I get the same error using "ol": "^5.2.0"