Use JSPsych with NextJS

[f-starace]

Hi! I'm trying to use Jspsych with NextJS.
NextJS is a framework built on top of react that enables SSR by default.

Problem is that jsPsych requires the window object to be correctly loaded.
I tried to import initJsPsych dynamically by following this article, but I'm not quite sure how to work with the object.

Do you have any suggestion?

[jodeleeuw]

Hi @f-starace,

As of version 7.0 jsPsych shouldn't be attaching anything to window.

Our set up tutorial covers how to work with jsPsych as a module. Have you tried following that guide yet?

(I'm converting this to a discussion instead of an issue).

[jodeleeuw]

Ack, good point. Maybe we should modify #2245 so that we check if window exists first?

[f-starace]

Not a problem, I found a solution at the moment by using next/dynamic by loading a component using client-side rendering
I'm still having issues integrating it with webgazer.

From the page route:

const EyetrackingComponent = dynamic(
  () => import("../../components/Eyetracking"),
  { ssr: false }
);

export default function Eyetracking() {
  return (
    <>
      <Navbar />
      {process.browser && <EyetrackingComponent></EyetrackingComponent>}
      <Footer />
    </>
  );
}

From the component:

import React, { useMemo } from "react";
import NextHead from "next/head";

import { initJsPsych } from "jspsych";
// import webgazer ext
import jsPsychExtensionWebgazer from "@jspsych/extension-webgazer";

// import other plugins
import jsPsychWebgazerInitCamera from "@jspsych/plugin-webgazer-init-camera";
import jsPsychWebgazerCalibrate from "@jspsych/plugin-webgazer-calibrate";
import jsPsychWebgazerValidate from "@jspsych/plugin-webgazer-validate";

// import css styles
import "jspsych/css/jspsych.css"
...

export default function EyetrackingComponent() {
  useMemo(() => {
    const jsPsych = initJsPsych({
      extensions: [{ type: jsPsychExtensionWebgazer }],
    });
    var calibration = {
      type: jsPsychWebgazerCalibrate,
      calibration_points: [
        [25, 25],
        [75, 25],
        [50, 50],
        [25, 75],
        [75, 75],
      ],
      repetitions_per_point: 2,
      randomize_calibration_order: true,
    };
    jsPsych.run([
      calibration,
    ]);
});
  return (
    <>
      <NextHead>
          <script 
            src="https://www.jspsych.org/7.0/demos/js/webgazer/webgazer.js"
            async
          </script>
      </NextHead>
    </>
  );
}

Edited with suggested changes

[bjoluc]

Glad you figured it out @f-starace; creating a custom component and only importing jsPsych in that file would've been my suggestion too. Especially, since you load the component with { ssr: false }, you should be able to skip all window checks in EyetrackingComponent, since it's only loaded client-side anyway. Similarly, you should be able to put a <script ... /> for webgazer directly into the <NextHead>.
Last, but not least, when you initJsPsych within the component, make sure to memoize the jsPsych instance it returns s.t. it survives re-renders. Pro tip: You can also import "jspsych/css/jspsych.css". And you'll likely want to render the jsPsych display element div from your component and provide its id to initJsPsych().

[bjoluc]

Ack, good point. Maybe we should modify #2245 so that we check if window exists first?

Absolutely!

[f-starace]

Thanks a lot for all the suggestions @bjoluc
I was new to the useMemo hook and it definitely removed some rendering issues I had while trying to load the experiment from another page.

I updated my previous comment with all changes in case somebody else stumbles across this situation

[jkhartshorne]

@f-starace -- I'm curious what your experience was with using NextJS, and whether the dynamic parts of jsPsych worked pretty well (like dynamically changing the timeline). I started a separate discussion about that here: #3053