2

i tried using this in my Nuxt project, but it failed upon compiling

in my plugin/sharp.js

import vue from "vue"
import sharp from "sharp"
vue.use(sharp)

and i my nuxt.config.js

plugins: [
  '~plugins/sharp.js',
],

I get error in my terminal upon compiling

Failed to compile with 4 errors                                                                                               friendly-errors 01:16:19  

These dependencies were not found:                                                                                                    friendly-errors 01:16:19  
                                                                                                                                      friendly-errors 01:16:19  
* child_process in ./node_modules/detect-libc/lib/detect-libc.js, ./node_modules/sharp/lib/libvips.js                                 friendly-errors 01:16:19
* fs in ./node_modules/detect-libc/lib/detect-libc.js, ./node_modules/sharp/lib/libvips.js                                            friendly-errors 01:16:19  
                                                                                                                                      friendly-errors 01:16:19  
To install them, you can run: npm install --save child_process fs
kissu
  • 40,416
  • 14
  • 65
  • 133
Opeyemi Odedeyi
  • 766
  • 1
  • 10
  • 38

2 Answers2

3

sharp is a Node.js package, hence this will not work with Vue. At least, not in the client context.

You are probably better optimizing your images ahead of time or via a service like Cloudinary.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • so using Cloudinary can be very expensive for what I am doing, so it is not an option. sharp would have been perfect if I could somehow get it to work, as I don't want the image I want to upload to go first to the API then it sends to AWS S3. Therefore I am looking for options where I can convert the image on frontend before sending it directly to AWS S3 – Opeyemi Odedeyi Jul 12 '21 at 20:07
  • @OpeyemiOdedeyi I mean, you cannot use `sharp` into Nuxt, at least not in a simple way IMO. Because you can still do some Node.js logic with it, but it will be far more complex, especially if you do use your app as `target: static`. Also, I'm not sure that this is a good idea to use Nuxt for both your frontend and image processing, the server may struggle pretty heavily while doing both. At the end, you should do the image processing with a middleware app, in between your Nuxt one and S3. Send your image from Nuxt to the middleware, optimize it there, and upload it to S3. Then fetch the URL. – kissu Jul 12 '21 at 22:23
0

I haved same problem with react. I use librarry npm react-sharp. I think paket npm vue-sharp does the same.

Yanov
  • 655
  • 7
  • 13
  • 1
    A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it is there, then quote the most relevant part of the page you are linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](/help/deleted-answers) – Steve Aug 11 '21 at 06:56