Error while rendering DOM element

Phaser 3
1

I have the following code, almost identical to this example:

preload () {
    this.load.html('nameform', 'assets/input_name.html')
}

create () {
  this.showForm()
}

showForm () {
    const element = this.add.dom(400, 600).createFromCache('')
    element.setPerspective(800);
    element.addListener('click')
    element.on('click', function (event) {
      if (event.target.name === 'loginButton') {
        const name = this.getChildByName('name')
        if (name.value !== '') {
          this.removeListener('click')

          //  Tween the form out
          this.scene.tweens.add({ targets: element.rotate3d, x: 1, w: 90, duration: 3000, ease: 'Power3' });
          this.scene.tweens.add({ targets: element, scaleX: 2, scaleY: 2, y: 700, duration: 3000, ease: 'Power3', onComplete: function () { element.setVisible(false) } });

          //  Populate the text with whatever they typed in as the username!
          window.localStorage.setItem('high-score-user', name.value)
        }
      }
    })
  }

When I run this, I run into an error in the Phaser code, in this snippet:

var DOMElementCSSRenderer = function (renderer, src, camera, parentMatrix)
{
    var node = src.node;
    var style = node.style;
    var settings = src.scene.sys.settings;

    if (!node || !style || !settings.visible || GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter !== 0 && (src.cameraFilter & camera.id)) || (src.parentContainer && !src.parentContainer.willRender()))
    {

src.node is undefined. What am I missing? also, I see there is a check for (!node), but after node is dereferenced. Is this a bug?

2

Shouldn’t it be createFromCache(‘nameform’)?

3

yes, that looked suspicious, but it’s the same in the Phaser3 example. Also, I verified the element does get created. However, after your suggestion I tried, and it appears to work. I wonder how does the example work then…