TextureLoader not working in Three.js. How do I get it working?

I am using Three.js to create a 3D Environment. When I am trying it with color, it works fine.

var geometry = new THREE.PlaneBufferGeometry( 4, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0x999999, side: THREE.DoubleSide, wireframe: false});
var plane = new THREE.Mesh( geometry, material);
scene.add( plane );

However, when I am trying to load an image as texture, the screen is just blank.

var geometry = new THREE.PlaneBufferGeometry( 4, 20, 32 );
var material = new THREE.MeshPhongMaterial( {map: new THREE.TextureLoader( ).load('img/4.png'), side: THREE.DoubleSide, wireframe: false});

var plane = new THREE.Mesh( geometry, material);
scene.add( plane );

My final goal is to use repeat from Texture to create a chess board type texture for my plane. (https://threejs.org/docs/#api/en/textures/Texture.repeat)

Please help me with the alternative to TextureLoader.

I have tried manually loading it too but doesn't work.

var request = require('request').defaults({ encoding: null });
var url = "img/4.png";

request(url, function(error, response, data) {
  if (!error && response.statusCode == 200) {
    var image = new Canvas.Image();
    image.src = data;

    var texture = new THREE.Texture(image);
    texture.needsUpdate = true;

    var material = new THREE.MeshPhongMaterial({map: texture, overdraw: true});
  } else {
    response = 'error';
  }
});