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.

Note: Not sure if it's related to NextJS or OpenLayers, but I have no problem importing OL modules in a custom webpack project that is not using NextJS, so my guess is that there is some settings missing by default.

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
Next: 9.1.6
Node: 12.14.0
OS: KDE neon User Edition 5.17 x86_64

[Timer]

It appears that ol does not ship with Node.js-compatible source files — the error you're seeing is because it's trying to run ES Modules in a Node.js environment.

To fix this, you'll need to do one of the following:

1. Instruct webpack to not exclude the package for the server bundle (Next.js does not bundle server-dependencies by default, which your custom setup might have).
2. Ask that ol be published to npm, compatible with both Node.js and the Browser.
3. You can move all usage of ol in your app to be client-side via import('ol/Map').then(...).

[jalik]

@Timer just to clarify, did you mean in the first solution to exclude the package from the server, or to not exclude ? I would thought that excluding the client package from the server would remove the importing error... do you have any Webpack setup example to do that with a package other than OL ?

The 3rd solution looked nice to me, but with OL we often need to import several functions (>10), wouldn't it be a callback hell to do like this ? Do you have an example for that situation too ?

I managed to import functions in the client using require() syntax inside a useEffect() block, but it's very ugly and it feels like a workaround..

[Timer]

@jalik to not exclude, so that it's bundled & transforms it into commonjs syntax.

As for multiple functions, yes, you'd need to import it multiple times.

[abumalick]

Can you provide some indication on how to achieve that?
I didn't find any clue.

[AndrewRayCode]

I'm running into this issue with react-spring:

/node/app/node_modules/react-spring/three.js:1
import * as THREE from 'three';
^^^^^^

From this line in my app:

import { useSpring } from 'react-spring/three';

I get this error when I npm run build.

The above import statement is in a component I load purely dynamically. The troublesome import is in Content.tsx, which I load in pages/index.tsx with:

import React from 'react';
import dynamic from 'next/dynamic';

const ContentDynamic = dynamic(() => import('./Content'), {
  ssr: false
});

const HomePage = () => {
  return <ContentDynamic />;
};

export default HomePage;

Is Nextjs unable to detect Content.tsx is only a client side component?

react-spring does appear to publish a cjs version, so this removes the error:

import { useSpring } from 'react-spring/three.cjs';

But this no longer has typescript types, and I don't see why it should have to be a special case import. Is there a way in Nextjs to mark a component as purely dynamic?

[AndrewRayCode]

Hmm, ok, I suspect this is because I have pages/Content.tsx, and nextjs is picking this up automatically as a page to be server rendered. I'm not sure if this is a bug or not. But separating my app into a src/pages and src/components folder now allows npm run build to work, and Nextjs no longer seems to be trying to bundle the component into the server

[Lwdthe1]

I'm running into a similar problem here: #18441

@Timer can you share an example of how to achieve this:

Instruct webpack to not exclude the package for the server bundle (Next.js does not bundle server-dependencies by default, which your custom setup might have).

#9890 (comment)

[benoj]

@Timer when you suggest:

1.Instruct webpack to not exclude the package for the server bundle (Next.js does not bundle server-dependencies by default, which your custom setup might have).

How exactly does one do this? I can't find any examples around..

[thekeviv]

My first day today with Next.js and I was having a similar issue with importing GLTFLoader from three js. After trying many things, I tried dynamically importing it and that solved my problem:

[alexkreidler]

I'll point out to anyone arriving at this issue: #706 tracks adding support for ESM modules directly to Next.JS.

In the meantime the recommended solution is to use https://github.com/martpie/next-transpile-modules to transpile the problematic node_modules as described above #9890 (comment).

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.