Question regarding external libraries with the jsPsych builder (i get errors)

[jannisbosch]

Hello,
first of all, I want to thank everyone involved for developing and updating jsPsych. I find it immensely helpful and managed to run an online-experiment with the "basic" version of jsPsych and connect it to my MySQL database via a php-script and everything went really smoothly. Now that I started learning about node.js, webpack and all that stuff I was motivated to adapt my experiment to those platforms and run a second online-experiment. However, i ran into a little problem that I could not solve using the available tutorials.
As to the problem:
Instead of using php I wanted to install knex.js and manage database connections with knex. In a regular javascript-file, I can easily install and use knex. However, I can not seem to use knex when using the jspsych-builder. I keep getting errors when trying to initialize knex via a require or import statement. I would be very thankful if someone could help me solve this problem :)

This is how i proceeded:

command

npm install -g jspsych builder
jspsych init
npm install knex --save
npm install mysql2 --save

JS (i only addead the import statement for knex.js)

/**
 * @title TESTING
 * @description hihi
 * @version 0.1.0
 *
 * @imageDir images
 * @audioDir audio
 * @videoDir video
 * @miscDir misc
 */

import "../styles/main.scss";

import knex from 'knex';
import { initJsPsych } from "jspsych";

import FullscreenPlugin from "@jspsych/plugin-fullscreen";
import HtmlKeyboardResponsePlugin from "@jspsych/plugin-html-keyboard-response";
import PreloadPlugin from "@jspsych/plugin-preload";

/**
 * @param {object} options 
 * @param {any} [options.input] 
 * @param {"development"|"production"|"jatos"} options.environment 
 * @param {{images: string[]; audio: string[]; video: string[];, misc: string[];}} options.assetPaths 
 */

export async function run({ assetPaths, input = {}, environment }) {
  const jsPsych = initJsPsych();

  const timeline = [];

  // Preload assets
  timeline.push({
    type: PreloadPlugin,
    images: assetPaths.images,
    audio: assetPaths.audio,
    video: assetPaths.video,
  });

  // Welcome screen
  timeline.push({
    type: HtmlKeyboardResponsePlugin,
    stimulus: "<p>Welcome to TESTING!<p/>",
  });

  // Switch to fullscreen
  timeline.push({
    type: FullscreenPlugin,
    fullscreen_mode: true,
  });

  await jsPsych.run(timeline);

  return jsPsych;
}

When trying to run the experiment, I keep getting the following error (and a list of similar errors for other .js files):
Error:
ERROR in ./node_modules/knex/lib/builder-interface-augmenter.js 3:24-39
Module not found: Error: Can't resolve 'util' in 'C:\Users\jboun\test2\node_modules\knex\lib'

When I do not initialize jspsych-builder, knex works just fine. What did I do wrong?

Thanks in advance for any help! I hope I did describe everything precise enough.
And keep up the very good work!

[bjoluc]

Hi @jannisbosch,
if you take a closer look at the error message, it says

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

...

The problem here is that knex.js is meant to be run on the server using Node.js, while the code you are writing in experiment.js is bundled by webpack and executed by the client's browser. You'll need to keep the frontend and backend code separate (not only for security reasons)... In other words, any simple express + knex.js app would do for your backend. Whether that's a better solution than the PHP script is another question; at least it's harder to deploy 😜

[jannisbosch]

Dear @bjoluc,
thanks a lot for taking the time to reply to my question. I did a lot of research on that error message, which did not immediately lead to me solving the problem but I definitely learned a lot doing that (even though a lot of new questions popped up, but that's probably just how it goes). I wasn't aware enough of the front-end/back-end differentiation until now and your reply definitely helped me to look in the right direction, so I'll just keep going from here (and decide later whether to go with express + knex or PHP) ;)

[bjoluc]

Great! Also, I can highly recommend JATOS as a ready-made backend for jsPsych experiments – with jspsych-builder, it works out of the box :)