Rendering SDF text in three.js using three-bmfont-text

I am trying to use the three-bmfont-text npm module in a Meteor project.

I can't show the generated text even after checking that threejs generated the material and the geometry. In the end, I changed the geometry to a simple plane and then I can see the material (shader is executed correctly)

// imports
global.THREE = require('three');
var createText = require('three-bmfont-text');
var loadFont = require('load-bmfont');
var MSDFShader = require('three-bmfont-text/shaders/msdf');

// code inside onRendered Meteor method
function drawText(opt, cb) {
    loadFont(opt.font, function (err, font) {
          if (err) throw err;
          var texloader = new THREE.TextureLoader();
          texloader.load(opt.image, function (tex) {
              cb(font, tex);
          });
    });
}

drawText({
        font: 'fonts/Roboto-msdf.json',
        image: 'fonts/Roboto-msdf.png'
}, startSDF);

function startSDF (font, tex) {
   var matSDF = new THREE.RawShaderMaterial(MSDFShader({
            map: tex,
            transparent: true,
            depthTest: false,
            depthWrite: false,
            color: '#FFFFFF'
   }));
   matSDF.needsUpdate = true;

   var geomSDF = createText({
            text:"TEST",
            width: 100,
            align: 'left',
            font: font,
            flipY: tex.flipY
   });
   console.log(geomSDF, matSDF);

   var objSDF = new THREE.Mesh( geomSDF, matSDF );
        scene.add( objSDF );
}

When I change the geometry (geomSDF) to "new THREE.PlaneGeometry(20, 20, 2, 2 )" I get this image showing that the material is good.

Is this related to async function or how Meteor imports libraries?

via boulabiar