ReferenceError: Rect is not defined

Online experiments
1

URL of experiment: Nicolas Goulet / online_version · GitLab

Description of the problem: I want to use PsychoJS Rect from Visual but get Referrence Error Rect not defined.

TLDR : Where do I need to put the PyschoJS Rect from Visual import in PsychoPy builder for it to work when starting the experiment from Pavlovia and not get Reference Error Rect not defined?

To be used in PsychoJS, it has to be imported. When I try to run the experiment online, it says to me that Rect is not defined/not imported.

I know we cannot do imports from the 2023 crib sheet but as Rect is from psychojs, I assume there is a way to use it in my experiment and I am pretty sure I am just being a novice and this is a pretty simple problem to fix. But I have spent hours scouring the web and the different crib sheets without being able to find an answer.

I have wrtitten custom code blocks for showing Rect shapes of certain size and color. The Psychopy/local version of the experiment works just fine. I tried putting the PsychoJS VIsual Rect import statement in the ‘‘before the experiment’’ section but still get the same message :

Reference Error : Rect is not defined

Really thankful for any help! I am so close to finally start collecting data for both the online and eeg version of this experiment :sob:

I know I could try to modify the PsychoJS code itself and add the import statement BUT if I understood the Crib Sheets/good practices of PsychoPy correctly, it is very strongly advised not to modify the PyschoJS script directly in Coder.

2

You have some invalid Before Experiment code

// Run 'Before Experiment' code from code_3
import {Rect} from 'psychopy/visual';

What is PsychoJS Rect from Visual ? I don’t think you can import it.

3

Thank you for your reply.

Rect is part of the PsychoPY and PsychoJS APIs → visual/Rect.js - PsychoJS API

It creates a rectangle visual stimulus. The use of it was implemented by one of our interns to give a colored window as part of the feedback. Here is the behaviour in PsychoPy

# Create rectangles for feedback
green_square = Rect(win, width=2, height=2, lineColor="green", lineWidth=5, fillColor=(0.5, 0.8, 0.5), pos=(0, 0), autoDraw=True)
red_square = Rect(win, width=2, height=2, lineColor="red", lineWidth=5, fillColor=(0.8, 0.5, 0.5), pos=(0, 0), autoDraw=True)
def begin_routine():
    green_square.setAutoDraw(False)
    red_square.setAutoDraw(False)
begin_routine()

Since Rect is defined both for PsychoJS and PsychoPy, I thought this was an issue of me not correctly using PsychoJS API or of me not using PsychoPy correctly for it to be translated automatically into PsychoJS.

And we already have the Visual from PsychoJS (which Rect is a part of) imported at the very start of the file online_version.js

import { core, data, sound, util, visual, hardware } from './lib/psychojs-2023.2.3.js';

Therefore I thought that maybe it would be usable without an additional import statement in the PsychoJS code but it does not seem to be the case.

4

Try

# Create rectangles for feedback
green_square = visual.Rect(win, width=2, height=2, lineColor="green", lineWidth=5, fillColor=(0.5, 0.8, 0.5), pos=(0, 0), autoDraw=True)
red_square = visual.Rect(win, width=2, height=2, lineColor="red", lineWidth=5, fillColor=(0.8, 0.5, 0.5), pos=(0, 0), autoDraw=True)
5

Hi!

Thanks for your reply.

I have finally been able to implement your proposal correctly.

However, it is stuck on ‘‘initialising’’ when piloting the study :

Error Message :

> Uncaught TypeError: Failed to resolve module specifier "psychopy/visual". Relative references must start with either "/", "./", or "../".

Here is the PsychoJS automatically generated from your proposed Psychopy :

green_square = new visual.Rect(psychoJS.window, {"width": 2, "height": 2, "lineColor": "green", "lineWidth": 5, "fillColor": [0.5, 0.8, 0.5], "pos": [0, 0], "autoDraw": true});
red_square = new visual.Rect(psychoJS.window, {"width": 2, "height": 2, "lineColor": "red", "lineWidth": 5, "fillColor": [0.8, 0.5, 0.5], "pos": [0, 0], "autoDraw": true});

I spent a good amount of time on the forum and online to find a solution before posting this in a reply.

Thanks again!

(CAN BE IGNORED) Sorry for the 19d delay, I had tried right away but it did not work as in the process of implementing your proposal I messed some code components and then had to do a fresh Ubuntu install :sweat_smile:

6

You haven’t removed the ‘Before Experiment’ code in code_3 I mentioned before
import {Rect} from 'psychopy/visual';

7

I am so sorry for having missed that! Thank you for pointing it out.

However, the issue with using Rect still remains

PsychoJS.js:829 TypeError: Cannot read properties of undefined (reading '_psychoJS')
    at new MinimalStim (MinimalStim.js:31:13)
    at new <anonymous> (WindowMixin.js:26:4)
    at new VisualStim (VisualStim.js:41:3)
    at new <anonymous> (ColorMixin.js:23:4)
    at new <anonymous> (WindowMixin.js:26:4)
    at new ShapeStim (ShapeStim.js:50:3)
    at new Rect (Rect.js:44:3)
    at Scheduler._currentTask (online_version.js:1701:20)
    at Scheduler._runNextTasks (Scheduler.js:226:24)
    at async Scheduler._runNextTasks (Scheduler.js:233:13)
log4javascript.js:148 FATAL 08:42:54.685 _GUI.dialog psychojs-2023.2.3.js:1200 | {}
MinimalStim.js:31 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_psychoJS')
    at new MinimalStim (MinimalStim.js:31:13)
    at new <anonymous> (WindowMixin.js:26:4)
    at new VisualStim (VisualStim.js:41:3)
    at new <anonymous> (ColorMixin.js:23:4)
    at new <anonymous> (WindowMixin.js:26:4)
    at new ShapeStim (ShapeStim.js:50:3)
    at new Rect (Rect.js:44:3)
    at Scheduler._currentTask (online_version.js:1701:20)
    at Scheduler._runNextTasks (Scheduler.js:226:24)
    at async Scheduler._runNextTasks (Scheduler.js:233:13)
Window.js:126 windowAlreadyInFullScreen: false

I have confirmed that the line 1701 is

green_square = new visual.Rect(psychoJS.window, {"width": 2, "height": 2, "lineColor": "green", "lineWidth": 5, "fillColor": [0.5, 0.8, 0.5], "pos": [0, 0], "autoDraw": true});

I have been studying posts with similar error code message but each time is seems to be about mistake from uploading ressources etc… (a message in particular where you referenced the Online Ressources section), not about using PsychoJS functions properly (which seems to be the issue I still am having)

Google searches haven’t returned much neither :grimacing: I haven’t found usage examples online neither, so I imagine there must be some obvious JavaScript syntax error I am missing in the automatically translated code

I have also read from one of the scrib sheet to check if it works locally on a browser but for some reason, ever since I re-installed Psychopy on a fresh ubuntu install I can’t run any experiment in the web browser (a seperate issue for which I am not asking support for, just to let you know I have tried that too!)

Thanks again!