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 :
vercel/next.js#9890 (comment)

[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]

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.

[mmomtchev]

@jahow, to achieve compatibility you have to respect the standards 😄 (it seems that not respecting written codes is a tradition where you work)

Seriously, these days most packages distributed through NPM that are meant to be used only on the front-end do not respect the standard as using bundling and transpiling tools has become the norm.

@jalik,
If you want to use openlayers with next.js, do the following:

npm install --save next-transpile-modules

// next.config.js
const withTranspile = require('next-transpile-modules')(['ol']);
module.exports = withTranspile();

@jalik, I am currently working on OpenLayers SSR with next.js and I have a working demo that I will soon publish.

[mmomtchev]

@jalik , I have a working POC with SSR for https://github.com/mmomtchev/rlayers in the ssr branch.

It currently works only for raster layers and fixed map sizes - as the server does not have a layout engine the map container must have a fixed size. You can check https://github.com/mmomtchev/rlayers-ssr-demo/blob/master/pages/index.js.

I shimmed just a handful missing features in jsdom - almost everything else was there. I will probably prepare a medium article on running OpenLayers in Node.js in the coming days.

[parthsarthiprasad]

Hey @mmomtchev great work with https://github.com/mmomtchev/rlayers , was working on orcasound-orcamap project which uses openlayers. I was trying to port to next.js and faced similar roadblock inevitably. Is there a proposal to have a package for stable rlayers?

[mmomtchev]

@parthsarthiprasad Everything but the SSR will probably be declared ready in the coming days.

SSR has still a number of issues that must be solved before it is truly usable in a production environment - it needs its own worker model as multi-threading is very different in Node.js compared to the browser.

[parthsarthiprasad]

Thanks will look out for this in future @mmomtchev , just wanted another suggestion, is there a way to have a support for nextjs and openlayers in production, as much as I've searched transpile-modules the only solution ?

[mmomtchev]

This is the solution - there is no way around it