TypeError: Cannot read properties of undefined (reading '_pixiId')

Online experiments
1

I’m trying to run an online experiment where .jpg images should be randomly (but balanced) drawn from three separate resource folders. Looks like the files generally load ok but I’m getting the attached error message.

My code chunk in the respective routine has the following in “begin routine”:

// ============================================================================
// MAPPING TRIAL POOL - Begin Routine (JavaScript)
// ============================================================================

// INITIALIZE POOL ONLY ONCE
if (typeof mapping_trial_pool === 'undefined') {
    console.log('\n' + '='.repeat(60));
    console.log('Creating mapping trial pool...');
    console.log('='.repeat(60));
    
    // DEBUG: Check if variables are defined
    console.log('DEBUG: face_key =', face_key, typeof face_key);
    console.log('DEBUG: building_key =', building_key, typeof building_key);
    console.log('DEBUG: key_assignment =', key_assignment);
    console.log('DEBUG: counterbalance =', counterbalance);
    
    // Initialize counters and pool
    consecutive_correct_mapping = 0;
    mapping_trial_pool = [];
    mapping_trial_index = 0;
    
    // Create 100 trials alternating between faces and buildings
    for (let i = 0; i < 100; i++) {
        if (i % 2 === 0) {
            // Even indices: faces
            mapping_trial_pool.push({
                'image': practice_faces[i % practice_faces.length],
                'image_type': 'face',
                'correct_response': face_key
            });
        } else {
            // Odd indices: buildings
            mapping_trial_pool.push({
                'image': practice_buildings[i % practice_buildings.length],
                'image_type': 'building',
                'correct_response': building_key
            });
        }
    }
    
    // Shuffle the pool
    mapping_trial_pool = shuffleArray(mapping_trial_pool);
    
    console.log(`Created pool with ${mapping_trial_pool.length} trials`);
    console.log('='.repeat(60) + '\n');
}

// ============================================================================
// GET CURRENT TRIAL (RUNS EVERY ITERATION)
// ============================================================================

// Initialize if they don't exist
if (typeof mapping_trial_index === 'undefined') {
    mapping_trial_index = 0;
}
if (typeof consecutive_correct_mapping === 'undefined') {
    consecutive_correct_mapping = 0;
}

// Get the current trial
let current_mapping_trial = mapping_trial_pool[mapping_trial_index % mapping_trial_pool.length];

// Get the image path for this trial
let imagePath = current_mapping_trial['image'];

// Ensure it's a string
imagePath = String(imagePath);

// Set the image property directly
image_mapping.image = imagePath;

// Log trial info
console.log(`Created pool with ${mapping_trial_pool.length} trials`);
console.log(`Trial ${mapping_trial_index}: ${current_mapping_trial['image_type'].toUpperCase()}`);
console.log(`  Image: ${current_mapping_trial['image']}`);
console.log(`  Correct response: ${current_mapping_trial['correct_response']}`);

// Increment for next trial
mapping_trial_index += 1;

Any solutions?

Screenshot 2025-11-26 at 15.22.52
Screenshot 2025-11-26 at 15.22.522780×1012 440 KB

2

What is line 2419 of your JS file?

3 
// *image_mapping* updates
if (t >= 0.2 && image_mapping.status === PsychoJS.Status.NOT_STARTED) {
  // keep track of start time/frame for later
  image_mapping.tStart = t;  // (not accounting for frame time here)
  image_mapping.frameNStart = frameN;  // exact frame index
  
  image_mapping.setAutoDraw(true);
}
4

In that case, perhaps image_mapping is becoming undefined.

I assume it’s the name of an image component. Are you using that name for anything else?

Also, what happens if you try setting the image for image_mapping in the component?