Running experiment online: TypeError: this._renderer.gl is undefined

OS (e.g. Win10): Win10
PsychoPy version (e.g. 1.84.x): 3.0.6
Standard Standalone? (y/n) : y
What are you trying to achieve?: I put my Builder PsychoPy project on Pavlovia and I’ve been fixing bugs in order to be able to run my experiment online. But this time, I have no idea what provoked this error : “Unfortunately we encountered an error: * TypeError: this._renderer.gl is undefined

What did you try to make it work?: I compiled the script and I looked for “renderer”, but it’s not in the script.

Hi @LittleMary, please can you provide more information about what you are trying to achieve, and how you are doing it? It would also be useful if you could provide a link to your task, so we can see how the error is generated.

As said, I am simply trying to run my experiment online. It works perfectly on the Builder and on the Coder. But when I run the experiment online (https://pavlovia.org/run/marie.cote/morphologie/html/), I get different errors depending on the navigator I’m using.

With Chrome and Opera, I get:
Unfortunately we encountered an error:
** TypeError: Cannot read property ‘readPixels’ of undefined*
Try to run the experiment again. If the error persists, contact the experimenter.

With Internet Explorer and Microsoft Edge, I simply get a blank page.

With Safari, the page is not loading either and it says:
Safari can’t open the page.
Safari can’t open the page “https://pavlovia/run/marie.cote/morphologie.html”. The error is “”(kCFErrorDomainWinSock:10054) Please choose Safari > Report Bugs to Apple, note the error number, and describe what you did before you saw this message.

It’s with Firefox that I get the TypeError: this._renderer.gl is undefined error.

Here’s a link to my project’s files, I made it public: https://gitlab.pavlovia.org/marie.cote/morphologie. You can run my file Epreuves_morpho.psyexp on PsychoPy to see what’s supposed to appear when I run my experiment online.

I thank you in advance.

P.S. You’re talking about seeing “how the error is generated”… There’s a way to see that? 'cause a big part of what makes me unable to debug my code myself is the fact that the error code isn’t pointing towards a specific part of my project’s code…

P.S.2 I can’t write JavaScript so I can’t test this solution, but is this answer applicable to my problem? ReferenceError when running study online I have code components that are only written in Python… Should I ask someone to translate them into JavaScript for me and put the JavaScript code in my code components, using the “both” option?

Hi @LittleMary,

As you noted, a little bit of javascript will be necessary, but it’s not insurmountable to convert what you have in there. While the builder does its best to make the python and javasript tasks as similar as possible, you have to do a little extra work when using code components. In Psychopy3 with online tasks, you need to fill in code components for both python and javascript separately. There’s a new dropdown option when viewing code components that shows either, or both languages side by side (selecting Python, Javascript, or Both). For example, here’s the side-by-side view of the first code component in your study, in the Apprentissage_Derivation_flexion routine:

You’ve defined your inputText in the python side, but not in the javascript side, which breaks the javascript later because it doesn’t know what to do with inputText. To see this, you can use the Javascript Console in any modern web browser (firefox, chrome, etc.). To open it in Firefox, for example, go to Tools → Web Developer → Console.

As you run through your task, the console will show a full log of what’s happening behind the scenes, with errors popping out in red. For example, here’s a screenshot of where your task is currently getting stuck:

The error is a ReferenceError: "inputText is not defined" defined on line 1360 of the js file the builder compiled for you, because there was no inputText defined in the javascript side of the code block above (you can click the line in the console and see exactly what js was written).

To fix this, you’d need to define your variable side-by-side with the python above, e.g. add var inputText = '' to the js side, but for the other blocks of the code component the conversion won’t be quite as simple. In the EachFrame block, you’d start by re-writing the python n = len(theseKeys) with var n = theseKeys.length (length is a property of javascript arrays) and go from there, e.g. replace python’s capitalized True and False with js’ true and false

I don’t think there’s a psychopy-specific guide to conversion [yet], but most of the code you have looks straightforward to translate, and if you get stuck you can give a few of the automated converters a try, specifically looking at transcrypt, jiphy, or the answers here. I haven’t tied any of them myself, but may give them a shot, and feel free to ask more questions if you get stuck. Good luck!

nb - I’m not sure why I’m getting different errors from you (i.e. the ReferenceError instead of the _renderer.gl or why the safari link wasn’t the same (e.g. no .org in pavlovia and no html before run; see the address I was able to succesfully get running). Try the same url and see if that gives renderer errors again?

Thanks so much for this detailed answer!

I’ll work on the javascript version of my code components and I’ll be using the console to do the debugging online, from now on.

I’m not seeing the same error as you, though, even in the console (and I’ve been using the exact same link in each browser) :

Is this error really caused by my code components not being translated in javascript?

Hmm, I think you’re right that this may actually be an antecedent problem. It looks like the line that’s causing the error in https://pavlovia.org/lib/core-3.0.6.js is:

this._renderer.gl.readPixels(0, 0, 1, 1, this._renderer.gl.RGBA, this._renderer.gl.UNSIGNED_BYTE, new Uint8Array(4));

For some reason _renderer.gl isn’t being set (possibly a problem with the underllying pixijs that psychojs depends on, and that’s coming out as cannot read property 'readPixels' of undefined here and as the slightly more readable TypeError: this._renderer.gl is undefined error in other browsers.

I’m not as familiar with the underlying the webgl renderer (maybe there’s some interaction with windows, as I was testing on a mac?), so I won’t be able to help you with that one, but I definitely agree this error comes before the other one! Maybe @apitiot can help with this one? Alternatively, this seems like a good candidate for a new issue on the psychojs issue tracker

So weirdly, this renderer/readPixels error suddenly disappeared Tuesday night and still hasn’t made a come back. I won’t be complaining!

I translated my Python code component in Javascript (I just changed the syntax and a few functions that differ from one language to the other). But now I’m getting a *ReferenceError: theseKeys is not defined error at line 1806 of my main Javascript file (var n = theseKeys.length;), which makes no sense since my theseKeys variable is defined in my function at line 1748 (var theseKeys = key_resp_Apprentissage_Derivation_flexion.keys;) in the function Apprentissage_Derivation_flexionRoutineBegin, which is called in the function Loop_Apprentissage_Derivation_flexionLoopBegin, which is in the flowScheduler.

It really acts as if the online version can’t take into consideration the “Begin Routine” box of my code components. I got around the problem by writing the following in the “Each Frame” box:
if (theseKeys == undefined) {
var theseKeys = key_resp_Apprentissage_Derivation_flexion.keys
}

… but it’s silly I have to do so…

Any ideas?

Thanks again!

Hello I’m having the same exact problem. I found the same error messages and I have no idea how to fix it. Could you tell me if you ever found a way to get this fixed or if it went away all on its own? Thank you!

Here’s the link to my project’s files. I made it public: Andres Lara / English Listening Task · GitLab

It works fine on PsychoPy but once I try to run the experiment on Pavlovia (https://pavlovia.org/run/anfelaras/english-listening-task/html/)
I get the same error message you got. Here’s a screen shot:
18

I ran the web developer console and I see the same errors you got, I ran it on Chrome.
32

Please help!!!

Thank you in advance.

1 Like