jsPsych integration with React

Question

I've been trying to put a custom experiment made with jsPsych, a library for running behavioral experiments, with custom plugins into a React container but i've run into some issues.

The first thing i tried to do was use makebrainwave's jspsych-react package, but when i try to run the example, after having to change the routes of the files in the import section and replacing the use of 'fs', i'm still running into this error:

Trial level node is missing the "type" parameter. The parameters for the node are: {} experiment.js:924
TypeError: jsPsych.plugins[trial.type] is undefined[Learn More] experiment.js:1051

Could anyone help me with it? It looks like it's trying to initialize something and failing, but otherwise I'm kinda lost in the error.

The first error occurs in the constructor function:

    // constructor
    var _construct = function() {
        // store a link to the parent of this node
        parent_node = parent;
        // create the ID for this node
        if (typeof parent == 'undefined') {
            relative_id = 0;
        } else {
            relative_id = relativeID;
        }
        // check if there is a timeline parameter
        // if there is, then this node has its own timeline
        if ((typeof parameters.timeline !== 'undefined') || (typeof jsPsych.plugins[trial_type] == 'function')) {
            // create timeline properties
            timeline_parameters = {
                timeline: [],
                loop_function: parameters.loop_function,
                conditional_function: parameters.conditional_function,
                sample: parameters.sample,
                randomize_order: typeof parameters.randomize_order == 'undefined' ? false : parameters.randomize_order,
                repetitions: typeof parameters.repetitions == 'undefined' ? 1 : parameters.repetitions,
                timeline_variables: typeof parameters.timeline_variables == 'undefined' ? [{}] : parameters.timeline_variables
            };
            self.setTimelineVariablesOrder();
            // extract all of the node level data and parameters
            var node_data = Object.assign({}, parameters);
            delete node_data.timeline;
            delete node_data.conditional_function;
            delete node_data.loop_function;
            delete node_data.randomize_order;
            delete node_data.repetitions;
            delete node_data.timeline_variables;
            delete node_data.sample;
            node_trial_data = node_data; // store for later...
            // create a TimelineNode for each element in the timeline
            for (var i = 0; i < parameters.timeline.length; i++) {
                timeline_parameters.timeline.push(new TimelineNode(Object.assign({}, node_data, parameters.timeline[i]), self, i));
            }
        }
        // if there is no timeline parameter, then this node is a trial node
        else {
            // check to see if a valid trial type is defined
            var trial_type = parameters.type;
            if (typeof trial_type == 'undefined') {
                console.error('Trial level node is missing the "type" parameter. The parameters for the node are: ' + JSON.stringify(parameters));
            } else if ((typeof jsPsych.plugins[trial_type] == 'undefined') && (trial_type.toString().replace(/\s/g,'') != "function(){returntimeline.timelineVariable(varname);}")) {
                console.error('No plugin loaded for trials of type "' + trial_type + '"');
            }
            // create a deep copy of the parameters for the trial
            trial_parameters = Object.assign({}, parameters);
        }
    }();

And the second one in the first line of the folowing function

    function setDefaultValues(trial){
        var trial_parameters = Object.keys(jsPsych.plugins[trial.type].info.parameters);
        for(var i=0; i<trial_parameters.length; i++){
            if(typeof trial[trial_parameters[i]] == 'undefined' || trial[trial_parameters[i]] === null){
                if(typeof jsPsych.plugins[trial.type].info.parameters[trial_parameters[i]].default == 'undefined'){
                    console.error('You must specify a value for the '+trial_parameters[i]+' parameter in the '+trial.type+' plugin.');
                } else {
                    trial[trial_parameters[i]] = jsPsych.plugins[trial.type].info.parameters[trial_parameters[i]].default;
                }
            }
        }
    }

I installed jspsych-react with yarn into the project and the test container is the following:

    import React, { Component } from 'react'
    import { Experiment } from "jspsych-react";
    import { visualOddball } from "./examples/timelines/visualOddball";
    import { callbackHTMLDisplay } from "./examples/plugins/callbackHTMLDisplay";
    import { callbackImageDisplay } from "./examples/plugins/callbackImageDisplay";

export default class ExperimentComponent extends Component {
    render() {
        return (
            <div>
                <Experiment
                    settings={{ timeline: visualOddball }}
                    plugins={{
                        "callback-html-display": callbackHTMLDisplay,
                        "callback-image-display": callbackImageDisplay
                    }}
                />
            </div>
        );
    }
}

Has anyone integrated something similar without using the jspsych-react package? which approach did you take?

Thanks in advance!