Unable to use npm package "imagemin-webp" in vuejs

Hi everyone.

I’m trying to use the same code from node in vuejs but I couldn’t get it to work.

The following code in node successfully uses the npm package imagemin-webp to convert image buffer into webp buffer:

const imageminWebp = require('imagemin-webp');
const webpOptions = {lossless: true};

try {
       .....
        const webpBuf = await imageminWebp(webpOptions)(imageBuffer);
        console.log(webpBuf);
    } catch(e) {
        console.log(e);
    }

I tried to use the same code in Vue below, only difference now is i’m using import instead of require:

<template>
....
</template>
<script>
      import WebP from 'imagemin-webp';

      export default {
            ......
      }
</script>

However, doing so throws the following error:

 WARNING  Compiled with 2 warnings                                                                                                   21:59:40

 warning  in ./node_modules/bin-wrapper/index.js

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

 warning  in ./node_modules/exec-buffer/node_modules/cross-spawn/index.js

Module not found: Error: Can't resolve 'spawn-sync' in '/Users/username/Documents/project/node_modules/exec-buffer/node_modules/cross-spawn'

What can I do to get it working in vueJs. Do I need to use webpack/browserify/babel?

Best,
Chris

This is not a front-end library. You cannot use it with vue.js.

Hi, thank you for replying.

Will it be possible to convert it into a frontend lib with webpack or browserify? I asked this because I tried with both webpack and browserify and also encountered other errors. So I was wondering if all backend node lib can be converted to frontend.

No, I don’t think so for this one. I didn’t look into it. However, on the browser side, there are lots of limitations, such as file apis.

1 Like