-
Notifications
You must be signed in to change notification settings - Fork 170
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
SyntaxError: Cannot use import statement outside a module #90
Comments
We don't currently transpile a CJS version of this module, since Next.js uses Server Side Rendering, and node can't handle import statements (or at least node 12 can't), it doesn't work. So to fix this, we would need a CJS version of the lib. This can be achieved by adding a babel transform that converts the imports into requires. Curious what version of node you're using. I think newer versions might support imports but I'm not sure. Thanks for reporting :) |
Thanks for the response! I'm using Node version A potential solution to this problem might be using Next.js's dynamic imports. I'll update here if this works |
The dynamic imports didn't work. I also tried to use this babel transform. Unfortunately, it also didn't work. |
Here's a link to an associated Stack Overflow post |
@fowad-sohail : Have you got it resolved?. I am at the same place where you were 20 days ago, using Next.js. Please let me know the steps you have used to solve the error. |
@tsubramanian Unfortunately I haven't. This was part of a project that I'm no longer a part of, I will make sure the rest of the team knows about this post so that if they make any progress they can update accordingly. Sorry for the inconvenience. |
@seveibar: Any update on the bug?, The above steps seem not working for fowad, please advise code examples of what steps to be done. |
Does anyone have an example repo of the UDT in nextjs reproducing the issue? Afraid I'm not intimately familiar with nextjs. @tsubramanian you might consider turning off SSR for the react image annotate component using NoSSR as a temporary solution until this is resolved. Edit: Although if it's breaking imports i suppose this may not be possible... |
I got tricky solution! Problem is that react-image-annotate can only be imported in client-side(SSR got error for import keyword) So, let react-image-annotate in Nextjs be imported only in client side in Next Page that needs this component, You can make component like this
Make component like this
|
I'm planning to use this, but my question is how we gonna pass the props to main component? |
I've been hunting for a package like this for so long!
Just trying to get this up and running but I'm running into this issue:
Here's the component that's using this library:
I'm using Next.js if that matters
Thank you!
The text was updated successfully, but these errors were encountered: