Sharp: Weird error appearing in angular + electron project

[GunterJameda]

Hi!

I'm trying to migrate an existing application from angular 5 to angular 7 that is supposed to run inside electron. That said, the application will be all offline and running server-side, only.

I copied the first component and everything went fine, but when I copied the second one, after fixing all bugs in the code, I got an error for which I already searched for a solution and I didn't get one yet. I went down to the source code to check if there was a way for me to discover the error and, again, I found nothing.

The error is something like this:

WARNING in ./node_modules/sharp/lib/libvips.js 51:22-69
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/sharp/lib/libvips.js 52:23-70
Critical dependency: the request of a dependency is an expression

ERROR in ./node_modules/sharp/build/Release/sharp.node 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

I could use some help to mitigate this error.

Thanks.

[lovell]

Did you see previous questions of a very similar nature? https://github.com/lovell/sharp/search?q=%22You+may+need+an+appropriate+loader+to+handle+this+file+type.%22&type=Issues

[GunterJameda]

I did, indeed, and I didn't find a solution for the problem, because they were not exactly the same problem I have.

I don't think this is a problem with webpack. Webpack has its normal configurations for an angular project and sharp was working until I copied this component. Which is very weird.

[GunterJameda]

@lovell I was able to trace the line where the error was occurring and it turns out to be here...

const sharpFile = sharp(filePath).rotate();

filePath is guaranteed to be a string. Any suggestion...?

[GunterJameda]

@lovell

Following this tutorial I was able to make this

ERROR in ./node_modules/sharp/build/Release/sharp.node 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

disappear. The warnings are still there. And another error appeared. This time, it's this one.

Uncaught Error: Could not locate the bindings file. Tried:
 → /path-to-project-folder/build/sharp.node
 → /path-to-project-folder/build/...
.
.
.

What should I do?

[GunterJameda]

It turns out I was able to put this to work. I'm not sure how, but it works now. I'm sorry for all the spam I put in here. Thanks!

[thadwoodman]

@GunterJameda I know this was a while ago, but do you remember what the solution was here? I'm having the same error

[GunterJameda]

@thadwoodman I don't quite remember, but I guess I kept trying rebuilding the modules (ie npm install) and eventually it worked. But I'm not sure. I remember I had another problem with sharp similar to this one where the log was not precise and I was passing a wrong typed argument to a sharp function and it definitively was not sharp(). That's the best I can do. I'm sorry. :/

[ValimGustavo]

@thadwoodman

I am experiencing the same problem.
Did you find a solution?

[thadwoodman]

Did you find a solution?

@ValimGustavo I'm pretty sure the root of my problem here was accidentally introducing the sharp dependency into my frontend. It was something like this:

// server.ts
import sharp from "sharp"

export function imageFn(){
...
}

// Component.tsx
import { imageFn } from "./server"

imageFn()

[ValimGustavo]

Got it.
I managed to solve my problem too.
I was unable to use Sharp with webpack on my AWS lambda. Using the layer scheme I managed to solve.
Link to solve the problem:
https://medium.com/javascript-in-plain-english/image-manipulation-with-sharp-aws-lambda-functions-layers-and-claudia-js-876d3dadcdb4