webpack issue with canvas

[wylde3161]

did a project in NodeJS, when i pack it using webpack some issues arose and the end result is that the canvas object is not defined and emits an error.

webpack.config.js

var webpack = require('webpack');
module.exports = {
    context: __dirname,
    entry: ["./index.js"],
    output: {
        library: "ThumbS",
        path: __dirname,
        filename: "davidService.js"
    },
    module:{
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    node: {
        console: false,
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    externals:{
         canvas: {
             commonjs: "canvas",
             commonjs2: "canvas",
             amd: "canvas",
             root: "_"
         }
    }
};

index.html

<script type="text/javascript" src="davidService.js"></script>
var ts = new ThumbS();

Your Environment

• Version of node-canvas 1.6.5
• Environment node 6.11.0 on MacBook Pro macOS Sierra 10.12.5:

[ghost]

I solved this by using node-loader: https://webpack.js.org/loaders/node-loader/

1. Install node-loader as dev dependency.
2. Add rule in webpack.config.js as follows

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

[LinusU]

@wylde3161 are you trying to create a bundle that will use the browser Canvas? In that case, good news, that should be supported in the 2.x alphas! Could you please try with that one? 😄

[zbjornson]

Per above ... this is fixed in 2.x!

[tonyxyz]

webpack-node-externals solves this nicely. Install as a dev dependency and then at a suitable point in your webpack config:

const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: './src/my_entry_point.js',
  target: 'node',
  externals: [nodeExternals()],
}