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.

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

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

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