this.container.width is not a function

[timster]

I created a new project and added vue-golden-layout.

Things seem to work generally fine, but I get the following error in the console:

TypeError: this.container.width is not a function
    updateSize  goldenlayout.js:727
    onResize    vue-golden-layout.js:1215
    <anonymous> self-hosted:876
    i           Vueresize.js:1
    call        ResizeSensor.js:128
    onResized   ResizeSensor.js:269

Here is a sample repository that exhibits the issue:

https://github.com/timster/test-golden-layout

Looks like some kind of issue caused by onResize then eventually calling updateSize in golden layout which tries to do this.container.width but this.container is undefined on first render.

[timster]

To follow up... I edited goldenlayout.js to log the value of this.container. It seems as. though the first call is not a jquery object, but the others are:

[eddow]

Hello,
The error seems to indicate a container is not initialised.
I installed test-golden-layout but couldn't reproduce the bug - do I have to make a specific manipulation ?

[timster]

What browser did you use? Sometimes I don’t get it in Safari. But it always happens in Firefox.

[eddow]

I usually use Chrome. I just tried it here with firefox, with the same result : no reproduction

[timster]

That's strange. I can only duplicate it in Firefox.

I figured out that for some reason in some cases it's calling onResize before goldenlayout is initialised. I'm not sure if it's a caching issue or a timing issue or whatever.

I changed the onResize function to this (added check for this.gl.isInitialised)

onResize() { this.gl && this.gl.isInitialised && this.gl.updateSize(); }

Would you be open to a PR for this addition? It seems to fix the issue with no adverse effects.

[jerkald]

I wanted to mention that I've also been seeing this error from time to time. It isn't always reproducible and seems like it is almost random or based on timing. I refreshed my page twice with no errors and then on the third time it did spit this out, with no changes to the underlying code.

Using chrome also.

[timster]

It's definitely because GL is not initialized yet. Fairly sure it's some kind of asynchronous timing thing since this library does async mounted so it's possible for onResize to get triggered before this.gl is finished intializing in mounted

[eddow]

For my research by reverse-engeneering here, the case only occurs when updateSize is called without arguments and it seems to occur only in golden-layout init.

In this function, the updateSize() call is preceded by a _setContainer() who should make sure the container is set to a valid dom-element.

As I can really not reproduce it here, may I please ask one of you to :

• set a conditional breakpoint on goldenlayout.js:727 with the condition !this.container.width
• describe here what kind of object this.container is

[timster]

In Safari, it's a jquery object every time:

However in Firefox, it's not a jQuery object the first time it's called (which is the cause of the error). It's just a regular HTMLElement:

[timster]

A little more troubleshooting. I added a console.log to the onResize function in vue-golden-layout. Here are the logs for a fresh page reload (no window resized).

In Safari, onResize is not called right away, and when it's first called, goldenlayout is initialized:

Chrome seems to be the same:

However in Firefox, onResize is called first (before GL is initialized) which causes the problem:

Seems very strange there is a difference in browsers.

[eddow]

I published a patched version where the jQuery element is given instead of the HTMLElement - please try 2.0.3 and close the bug accordingly

[timster]

Looks like that fixes the issue for us. Thanks for your help!