search

scaleflex / filerobot-image-editor

Edit, resize, and filter any image! Any questions or issues, please report to https://github.com/scaleflex/filerobot-image-editor/issues
MIT License
1.27k stars 322 forks source link

Can't resolve 'canvas' with NextJS 13.5.3 #390

Closed whistledev0910 closed 9 months ago

whistledev0910 commented 9 months ago

Hello sir, I am having some problems using your package.

As the title says, I got the error "Can't resolve 'canvas' " when I tried to install your package into package.json.

Screenshot 2023-10-03 at 16 55 13

I followed the instructions and installed the necessary packages as required by the pre-installation.

I look forward to your help. I sincerely thank.

Have a nice day <3

whistledev0910 commented 9 months ago

I have found a solution. Basically the error here is because of "canvas".

  1. I have added canvas to the dependencies.
  2. I use macos, and everyone needs to follow docs for the installation to complete.
  3. Then, to use it with nextjs, you need to add a few settings to be able to use it on nextjs. experimental: { esmExternals: 'loose', } webpack: (config) => { config.externals = [...config.externals, { canvas: 'canvas' }] return config },
  4. And finally we need to use nextjs dynamic import to avoid "Window is not defined" error. FilerobotImageEditor page
whistledev0910 commented 9 months ago

I hope this helps someone who is also experiencing this.

satishgoml commented 7 months ago

Thankyou

satishgoml commented 7 months ago

For some reason i can't drag and edit some of the annotations in brave browser in vercel @whistledev0910 Any idea about it. In other browsers it is working

https://filerobot-image-editor-nextjs.vercel.app/