Sharp: Use with Webpack 2

[atwright147]

Hey,

I raised this issue on StackOverflow but have had no responses, so I thought I would go straight to the horse's mouth :)

---

I am trying to create an app in Electron which uses React, Webpack 2, Sharp and Electron.

I just added Sharp (https://github.com/lovell/sharp) and Webpack is adamantly trying to build Sharp but I don't think it should be (I could be wrong and if so, how would I get these files to load)?

I get the following stdout:

WARNING in ./~/sharp/lib/constructor.js
Module not found: Error: Can't resolve '../vendor/lib/versions.json' in '/Users/andy/Development/image-browser/node_modules/sharp/lib'
@ ./~/sharp/lib/constructor.js 23:15-53
@ ./~/sharp/lib/index.js
@ ./app/src/utils/getImage.js
@ ./app/src/components/Images/image.js
@ ./app/src/components/Images/index.js
@ ./app/src/App.js
@ ./app/src/entry.js

WARNING in ./~/sharp/lib/icc/sRGB.icc
Module parse failed: /Users/andy/Development/image-browser/node_modules/sharp/lib/icc/sRGB.icc Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/sharp/lib ^\.\/.*$
@ ./~/sharp/lib/index.js
@ ./app/src/utils/getImage.js
@ ./app/src/components/Images/image.js
@ ./app/src/components/Images/index.js
@ ./app/src/App.js
@ ./app/src/entry.js

WARNING in ./~/sharp/lib/icc/cmyk.icm
Module parse failed: /Users/andy/Development/image-browser/node_modules/sharp/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)
@ ./~/sharp/lib ^\.\/.*$
@ ./~/sharp/lib/index.js
@ ./app/src/utils/getImage.js
@ ./app/src/components/Images/image.js
@ ./app/src/components/Images/index.js
@ ./app/src/App.js
@ ./app/src/entry.js

ERROR in ./~/sharp/build/Release/sharp.node
Module parse failed: /Users/andy/Development/image-browser/node_modules/sharp/build/Release/sharp.node Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/sharp/lib/constructor.js 8:14-52
@ ./~/sharp/lib/index.js
@ ./app/src/utils/getImage.js
@ ./app/src/components/Images/image.js
@ ./app/src/components/Images/index.js
@ ./app/src/App.js
@ ./app/src/entry.js

webpack.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {

    watch: true,

    target: 'electron',

    entry: './app/src/entry.js',

    devtool: 'source-map',

    output: {
        path: __dirname + '/app/build',
        publicPath: 'build/',
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                include: /\/app\/src/,
                // exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            'env',
                            'react'
                        ]
                    }
                }
            },
            // {
            //     test: /\.node$/,
            //     use: {
            //         loader: 'node-loader'
            //     }
            // },
            {
                test: /\.(sass|scss)$/,
                include: /\/app\/src/,
                // exclude: /(node_modules)/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                include: /\/app\/src/,
                // exclude: /(node_modules)/,
                use: {
                    loader: 'file-loader',
                    query: {
                        name: '[name].[ext]?[hash]'
                    }
                }
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin({
            filename: 'bundle.css',
            disable: false,
            allChunks: true
        })
    ]
}

My babel config (extracted from package.json):

"babel": {
    "retainLines": true,
    "presets": [
        [
            "env",
            {
            "targets": {
                "electron": 1.6,
                "node": 7.9
            },
                "modules": false,
                "debug": true
            }
        ],
        "es2015",
        "es2016",
        "es2017"
    ]
},

Any ideas?

[lovell]

"Webpack is adamantly trying to build Sharp but I don't think it should be"

Did you see https://webpack.js.org/configuration/externals/ ?

[atwright147]

Thank you for getting back to me so quickly.

I have had a play with this but I am still unsure how to get it to work.

I'm not very good with Webpack yet but I currently have the following:

<!-- src/index.html -->
<script src="../node_modules/sharp/lib/index.js"></script>

// extract from webpack.config.js
...
    externals: {
        sharp: 'sharp'  // also tried: sharp: 'Sharp' | Sharp: 'sharp' | Sharp: 'Sharp'
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'app/src'),
                // exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            'env',
                            'react'
                        ]
                    }
                }
            },
            {
                test: /\.(sass|scss)$/,
                include: path.resolve(__dirname, 'app/src'),
                // exclude: /(node_modules)/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                include: path.resolve(__dirname, 'app/src'),
                // exclude: /(node_modules)/,
                use: {
                    loader: 'file-loader',
                    query: {
                        name: '[name].[ext]?[hash]'
                    }
                }
            }
        ]
    },
...

Any thoughts?

[lovell]

Whilst I've used Webpack quite a bit, I have minimal experience of Electron. Perhaps try to remove Webpack from the equation entirely and see if that helps. I'll leave this open in case others have ideas. Good luck!

[atwright147]

:)

Is there a version of this package built as es5?

Electron is just Chrome with access to node's internal modules -- so that shouldn't be too much of an issue. Have you ever used sharp with Webpack?

[leonardojobim]

Hi,

I have the same issue.
The app uses the webpack-simple from vue-cli and the dependencies are only firebase components and sharp.

[FDiskas]

:arrow_forward: try this

externals: {
   'sharp': 'commonjs sharp'
}

[artfree]

Like leonardo-sj, I'm using vue (vue-cli) for my app. Have the same problem. Tried FDiskas suggestion for externals, to no avail. Any other suggestions anyone?

[michaeleekk]

I had the same issue and got some luck with node-loader installed and set the following in the package.json

{
    test: /\.node$/,
    use: 'node-loader'
},

I solved the ERROR in ./~/sharp/build/Release/sharp.node. But I'm not sure if not solving the other three warnings will cause any issues yet.
But at least now my Electron application can be started now.

[artfree]

thanks, michaelleekk for your suggestion. I tried it, to no avail. Not using Electron. Running the vue-cli for vue.js which generated the webpack configuration - as leonardo-sj, above. Anyone?

[HdSeKenny]

`WARNING in ./~/lqip-loader/~/sharp/lib/icc/sRGB.icc
Module parse failed: /Users/Kuan/Desktop/sweeter/node_modules/lqip-loader/node_modules/sharp/lib/icc/sRGB.icc Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/lqip-loader/~/sharp/lib ^./.*$
@ ./~/lqip-loader/~/sharp/lib/index.js
@ ./src/app.js
@ ./src/client.js
@ multi webpack-dev-server/client?http://0.0.0.0:5858 ./src/client.js

WARNING in ./~/lqip-loader/~/sharp/lib/icc/cmyk.icm
Module parse failed: /Users/Kuan/Desktop/sweeter/node_modules/lqip-loader/node_modules/sharp/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)
@ ./~/lqip-loader/~/sharp/lib ^./.*$
@ ./~/lqip-loader/~/sharp/lib/index.js
@ ./src/app.js
@ ./src/client.js
@ multi webpack-dev-server/client?http://0.0.0.0:5858 ./src/client.js

ERROR in ./~/lqip-loader/~/sharp/build/Release/sharp.node
Module parse failed: /Users/Kuan/Desktop/sweeter/node_modules/lqip-loader/node_modules/sharp/build/Release/sharp.node Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/lqip-loader/~/sharp/lib/constructor.js 8:14-52
@ ./~/lqip-loader/~/sharp/lib/index.js
@ ./src/app.js
@ ./src/client.js
@ multi webpack-dev-server/client?http://0.0.0.0:5858 ./src/client.js`

the same issue

[lovell]

Please remember that sharp will not work in a browser; it requires the Node runtime.

[atwright147]

I have successfully got this working.

The key was finding this article: http://jlongster.com/Backend-Apps-with-Webpack--Part-I#p28 (thanks @jlongster).

In principle, it is the same solution as that suggested by @FDiskas (https://github.com/lovell/sharp/issues/794#issuecomment-306555683).

My webpack.config.js looks like the following:

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path');
const fs = require('fs');

// FROM: http://jlongster.com/Backend-Apps-with-Webpack--Part-I#p28
const nodeModules = {};
fs.readdirSync('node_modules')
    .filter(item => ['.bin'].indexOf(item) === -1)  // exclude the .bin folder
    .forEach((mod) => {
        nodeModules[mod] = 'commonjs ' + mod;
    });

module.exports = {
    watch: true,
    target: 'electron',
    entry: ['babel-polyfill', './app/src/entry.js'],
    devtool: 'source-map',
    externals: nodeModules,
    output: {
        path: __dirname + '/app/build',
        publicPath: 'build/',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'app/src'),
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            'env',
                            'react'
                        ]
                    }
                }
            },
            {
                test: /\.(sass|scss)$/,
                include: path.resolve(__dirname, 'app/src'),
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                include: path.resolve(__dirname, 'app/src'),
                use: {
                    loader: 'file-loader',
                    query: {
                        name: '[name].[ext]?[hash]'
                    }
                }
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'bundle.css',
            disable: false,
            allChunks: true
        })
    ]
}

TL;DR

Use this to get a list of ALL your node modules:

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,