Electron for React cannot load custom cursor

Question

I am working with Electron in React. I'm having an issue where Electron cannot get my custom cursor, but it works well with default cursors like pointer, progress, etc. This is my CSS property value for the cursor:

 cursor: url('../../images/common/icon_cut.png');

This is my error message:

0] ERROR in ./app/images/common/icon_cut.png
[0] Module parse failed: /Users/cuong/ops/ecode/skill-share/app/images/common/icon_cut.png Unexpected character '�' (1:0)
[0] You may need an appropriate loader to handle this file type. [0] SyntaxError: Unexpected character '�' (1:0)

This is my webpack config

'use strict';

const webpack = require('webpack');
const path = require('path');

module.exports = {
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['babel-loader'],
      exclude: /node_modules/
    }, {
      test: /\.json$/,
      loader: 'json-loader'
    }]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
  },
  plugins: [
    new webpack.optimize.DedupePlugin(),
  ],
  externals: [
    // put your node 3rd party libraries which can't be built with webpack here
    // (mysql, mongodb, and so on..)
  ]
};

Anyone knows the solution to my problem?

Answer 1

Try adding this loader to your webpack config file to test .png support:

{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }