-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cannot use import statement outside a module #9890
Comments
It appears that To fix this, you'll need to do one of the following:
|
@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.. |
@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. |
Can you provide some indication on how to achieve that? |
I'm running into this issue with react-spring:
From this line in my app:
I get this error when I The above
Is Nextjs unable to detect
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? |
Hmm, ok, I suspect this is because I have |
@Timer when you suggest:
How exactly does one do this? I can't find any examples around.. |
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 |
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. |
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
npx create-next-app
and go to that foldernpm i -P ol
pages/index.js
import Map from 'ol/Map'
at the top of the filenpx next
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
The text was updated successfully, but these errors were encountered: