Openlayers: Cannot use import statement outside a module

[jalik]

Describe the bug
Importing an OL component using syntax like import Map from 'ol/Map' does not work with NextJS framework.

To Reproduce

1. Create a default NextJS project by running npx create-next-app and go to that folder
2. Install the OL package by running npm i -P ol
3. Open the file pages/index.js
4. Add the line import Map from 'ol/Map' at the top of the file
5. Run the project with npx next
6. Go to http://localhost:3000/

Expected behavior
The import syntax of OL component should not fail when accessing the page.

System info
Node v12.14.0
OS: KDE neon User Edition 5.17 x86_64

[jalik]

To add something useful, I had a reply from the NextJS staff, in short OpenLayers is not compatible with ES Modules in NodeJS :
https://github.com/zeit/next.js/issues/9890#issuecomment-569822580

[jahow]

Do you know what would be required to achieve such compatibility? I personally have no experience with this framework.

Also maybe using a full build instead of ES6 modules will work better, e.g.:
https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js

[jalik]

Hello @jahow,

In short Next.js is a very popular and robust Javascript framework that allows to render pages built with React on the server (SSR), thus allowing fast loading and great SEO.

I don't know the OL source code well, and it has changed since the last time I had a look at it (it was compiled with make if I am right). So I would need to dig and experiment with the current code base to see how big the modifications would be.

I would say that this issue does not only concern a specific framework (Next.js), but all kind of JS frameworks that could render pages on server (Node.js). So the main concern is more to make OL compatible with Node.js than to make it compatible with X or Y.

Also including the full build as you suggested is a workaround but not a long term solution.
Because we're trying to make pages as small as possible and importing only what we need with ES modules or CommonJS is the way to go.

I'll keep you in touch, but I am very busy, so don't expect a return soon.

Bonne soirée ;)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.