support for 8.2.0

[Zeleksonob]

Hi - when support for 8.2.0 is coming?

[jonataswalker]

Hi @Zeleksonob, what does stop you from using 8.2?

It does seem to be any breaking changes.

[Zeleksonob]

Hi @jonataswalker, I'm getting the following errors when advancing to ol 8.2 with 5.3.0

ERROR in ./node_modules/ol-contextmenu/dist/ol-contextmenu.js 15:0-35
Module not found: Error: Can't resolve 'ol/control/Control' in '\node_modules\ol-contextmenu\dist'
Did you mean 'Control.js'?
BREAKING CHANGE: The request 'ol/control/Control' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/ol-contextmenu/dist/ol-contextmenu.js 16:0-35
Module not found: Error: Can't resolve 'ol/MapBrowserEvent' in '\node_modules\ol-contextmenu\dist'
Did you mean 'MapBrowserEvent.js'?
BREAKING CHANGE: The request 'ol/MapBrowserEvent' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[jonataswalker]

Are you able to provide a reproducible example?

https://stackoverflow.com/help/minimal-reproducible-example

[Zeleksonob]

@jonataswalker pretty easy it 100% reproducible here the action i took :

1. run npx create-react-app my-app --template typescript
2. run npm install ol,ol-contextmenu
3. below is example i put the call in useEffect and also the import import ContextMenu from 'ol-contextmenu'

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import ContextMenu from 'ol-contextmenu';
function App() {

  useEffect(()=>{

    const contextMenu =  new ContextMenu(
      {
          width : 170,
          defaultItems : false,               
      });
  },[]);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

[Zeleksonob]

Hi :), Any updates?

[MericKarabulut]

@jonataswalker pretty easy it 100% reproducible here the action i took :

1. run npx create-react-app my-app --template typescript
2. run npm install ol,ol-contextmenu
3. below is example i put the call in useEffect and also the import import ContextMenu from 'ol-contextmenu'

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import ContextMenu from 'ol-contextmenu';
function App() {

  useEffect(()=>{

    const contextMenu =  new ContextMenu(
      {
          width : 170,
          defaultItems : false,               
      });
  },[]);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

i follow the steps and did the same thing npx create-react-app my-app --template typescript npm install ol,ol-contextmenu, i placed the code you provide to App.tsx,

npm version: 10.2.4, node version: v20.11.0

And here is the error:

ERROR in ../../../node_modules/ol-contextmenu/dist/ol-contextmenu.js 15:0-35
Module not found: Error: Can't resolve 'ol/control/Control' in 'C:\Users\karab\node_modules\ol-contextmenu\dist'
Did you mean 'Control.js'?
BREAKING CHANGE: The request 'ol/control/Control' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ../../../node_modules/ol-contextmenu/dist/ol-contextmenu.js 16:0-35
Module not found: Error: Can't resolve 'ol/MapBrowserEvent' in 'C:\Users\karab\node_modules\ol-contextmenu\dist'
Did you mean 'MapBrowserEvent.js'?
BREAKING CHANGE: The request 'ol/MapBrowserEvent' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[MericKarabulut]

@jonataswalker Honestly, it is the best and only context menu i saw in openlayers. I hope it will continue on 8.2.

[marcelkauf]

This has nothing to do with OL 8.2 but seems to be a problem with CRA5 applications instead. A workaround for this is described here: https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes

The latest version of this library works fine with OL 8.2 and Angular 15.

[jonataswalker]

@MericKarabulut

Can you follow @marcelkauf suggestion? Or better, you could move away from (deprecated/unmaintained) create-react-app and use a modern approach like Vite.

https://www.freecodecamp.org/news/how-to-create-a-react-app-in-2024/