keypress not detected

[jelkastojanov]

Hi everyone! For my experiment, I need to create a new plugin. I have built a skeleton of it following this tutorial: https://www.youtube.com/watch?v=XQcsFwAmbiw

For now, I just want participants to see some short instructions and press a button on a keyboard to continue. It seems pretty straightforward, but when the experiment reaches this point, the 'continue' keypress (space) is not registered and the TypeError 'v.toLowerCase is not a function' pops up which points me to the original jspsych.js file and to the following line:
var valid_lower = parameters.valid_responses.map(function(v) {return v.toLowerCase();});

      var valid_response = false;
      if (typeof parameters.valid_responses === 'undefined'){
        valid_response = true;
      }
      else if(parameters.valid_responses == jsPsych.ALL_KEYS) {
        valid_response = true;
      } 
      else if(parameters.valid_responses != jsPsych.NO_KEYS){
        if(parameters.valid_responses.includes(e.key)){
          valid_response = true;
        }
        if(!case_sensitive) {
          var valid_lower = parameters.valid_responses.map(function(v) {return v.toLowerCase();});
          var key_lower = e.key.toLowerCase();
          if (valid_lower.includes(key_lower)) {
            valid_response = true;
          }
        }
      }

Here's the plugin code (non-related chunks of code are commented out so they shouldn't cause problems):

  plugin.info = {
    name: "deck-of-cards",
    parameters: {
      instructions: {
        type: jsPsych.plugins.parameterType.STRING,
        default: undefined
      },
      key: {
        type: jsPsych.plugins.parameterType.KEYCODE,
        default: 32
      },
      screen_name: {
        type: jsPsych.plugins.parameterType.STRING,
        default: 'deck-of-cards' 
      }
    }
  }

plugin.trial section

function showInstructions(){
      display_element.innerHTML = "<p>" + trial.instructions + "</p>";

      jsPsych.pluginAPI.getKeyboardResponse({
        callback_function: after_response,
        valid_responses: [trial.key],
        rt_method: 'performance',
        persist: false,
        allow_held_key: false
      });
    }

    function after_response(response_info){
      rt.push(response_info.rt);
    }

    function end_trial(){
        trial_data.rt = JSON.stringify(rt);
        display_element.innerHTML = '';
        jsPsych.finishTrial(trial_data); 
    }

    // Load the function
    showInstructions();
  };

Main task code initiating the plugin:

(Variable displayCards has been included in the timeline, and it is displaying properly, the problem is only the keypress.)

var displayCards = {
   type: 'deck-of-cards',
   instructions: 'Testing instructions',
   key: 32
};

Does anyone have an idea of what might be the issue? Thank you very much!