Cannot use import statement outside a module

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]

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 😉

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