Sharp: Setting up angular + typescript + electron + sharp

[rui-cruz]

Hey guys,

I'm sorry.. This have been a long run and I'm always hitting some Wall.. I hate to be such a newbie ^^

I've an angular+typescript+electron app already Setup and running. The missing part is Sharp.
I've instaled Sharp with

npm install sharp --save-dev

and I've installed typings that are recognized!
the problem is when I run "npm start":

WARNING in ./node_modules/sharp/lib/icc/sRGB.icc
Module parse failed: E:app-electronnode_modulessharp\lib\iccsRGB.icc Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/sharp/lib ^./.*$
@ ./node_modules/sharp/lib/index.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi ./src/main.ts

WARNING in ./node_modules/sharp/lib/icc/cmyk.icm
Module parse failed: E:app-electronnode_modulessharp\lib\icc\cmyk.icm Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/sharp/lib ^./.*$
@ ./node_modules/sharp/lib/index.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi ./src/main.ts

WARNING in ./node_modules/sharp/lib/constructor.js
Module not found: Error: Can't resolve '../vendor/lib/versions.json' in 'E:albumteller-electronnode_modulessharp\lib'
@ ./node_modules/sharp/lib/constructor.js 24:15-53
@ ./node_modules/sharp/lib/index.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi ./src/main.ts

ERROR in ./node_modules/sharp/build/Release/sharp.node
Module parse failed: E:app-electronnode_modulessharpbuild\Releasesharp.node Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/sharp/lib/constructor.js 9:14-52
@ ./node_modules/sharp/lib/index.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi ./src/main.ts

Does anyone else is having this issue? How do I solve this?

It would be great if there was an angular example with a SharpModule ready to use on angular projects

Thank you,
Rui

[lovell]

This looks like a Webpack misconfiguration, please see #794.

[rui-cruz]

Hi @lovell, always ready to help! Very kind from you..

I'll try it when I get home tonight.

Thank you very much!

[rui-cruz]

Hi!

Is there any exemple of how to Setup webpack 3.3 ?
I'm Reading this but I'm not sure what the hell I'm doing :( in the end all I want to to resize... 😢

[lovell]

This is probably a question for Stack Overflow as it is more of a general question relating to using native Node.js modules with Webpack. Good luck!

[rui-cruz]

Hi,

After been able to build, it was required to add this to webpack.config.js:

const nodeModules = {};
fs.readdirSync('node_modules')
.filter(item => ['.bin'].indexOf(item) === -1 ) // exclude the .bin folder
.forEach((mod) => {
nodeModules[mod] = 'commonjs ' + mod;
});

and hand the nodeModules variable to Webpack's externals key:

externals: nodeModules,

Thank very much @atwright147!!

Then, to get rid of the problem mentioned before, I had to run also:

npm rebuild --runtime=electron --target=1.7.5 --disturl=https://atom.io/download/atom-shell --build-from-source

Hope this helps someone..
Btw I'm really impressed with the performance.. omg..

[sanchezpablo]

@rui-cruz please could you send me the webpack.config.js that you use? I don't have at all webpack config, I'm using sharp in this boilerplate angular-electron (angular 6 + typescript + electron) and when sharp added, I'm receiving this error:

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

but I don't have webpack config file, where should I do this settings in order to use sharp?

Thanks in advance!

[daniandl]

I'm in the same boat :/

Tried just about every fix on this repo.
All of https://github.com/lovell/sharp/issues/932#issuecomment-327942002 answers
and trying electron-rebuild

Is there a new way to do this? Since it's been more than a year..
I'm using vue-cli so I can extend my webpack through vue.config.js

my vue.config.js

const fs = require('fs')

const nodeModules = {};
fs.readdirSync('node_modules')
    .filter(item => ['.bin'].indexOf(item) === -1)  // exclude the .bin folder
    .forEach((mod) => {
        nodeModules[mod] = `commonjs ${  mod}`;
    });


module.exports = {

  chainWebpack: config => {
    config.module
      .rule('node')
      .test(/.node$/)
      .use('node-loader')
      .loader('node-loader')
      .end()
  },


  configureWebpack: {
    devtool: 'source-map',
    externals: nodeModules
  },
  lintOnSave: false,
};

EDIT: For anyone in the same boat using Vue with Electron (vue-cli-plugin-electron-builder), try this:

pluginOptions: {
    electronBuilder: {
      externals: ['sharp'],
    }
  },

instead of straight configuring Webpack like in my earlier snippet. Fixed it for me, hope you find the same luck.

[Alex-Camara]

@daniandl thank you, your solution seems to work on my project!