VAS Plugin Error with webpack

[d-bohn]

Hello,

I was excited to see that someone contributed a VAS plugin for jsPsych. I'd very much like to try this plugin in one of my experiments, however, when I try to use it as a drop-in replacement for survey-likert (with the appropriate parameters) it throws an error: Uncaught ReferenceError: jsPsychModule is not defined.

I downloaded the plugin using npm and compiled the experiment with webpack. The experiment compiles, but during runtime throws the error above. I'm confident that the error is related to the VAS plugin as the experiment works perfectly fine with the likert scale plugin, however, when using the VAS plugin the error occurs.

Any thoughts on how to remedy the issue so I can play around with the plugin would be appreciated!

[jodeleeuw]

@bjoluc any thoughts on this one? I'm guessing there is some config needed because the VAS plugin is not using the TS template, and that we may want to adjust the package build for this scenario.

[bjoluc]

@d-bohn The VAS plugin is meant to be included in a script tag and works with global variables, most notably the jsPsychModule variable (which is defined when jsPsych is loaded as a script). There is a hack here based on the webpack shimming guide: If you npm i -D impors-loader exports-loader, you can use

import jsPsychHtmlVasResponse from "imports-loader?type=commonjs&imports=single|jspsych|jsPsychModule!exports-loader?type=commonjs&exports=single|jsPsychHtmlVasResponse!@jspsych-contrib/plugin-html-vas-response";

like any other core plugin.

I'm guessing there is some config needed because the VAS plugin is not using the TS template, and that we may want to adjust the package build for this scenario.

@jodeleeuw We might be able to add an extra build step that creates an ES/commonjs module based on the IIFE file. But that would be pretty hacky and nothing I'd like to maintain. Maybe mention the imports-loader exports-loader workaround somewhere instead?

I just put together a generic webpack config extension I think I'll add to jsPsych builder (@d-bohn you can simply apply this to your webpack config object and just import jsPsychHtmlVasResponse from "@jspsych-contrib/plugin-html-vas-response";):

import { readFileSync } from "fs";

// Transform IIFE plugins from `@jspsych-contrib` to modules using `imports-loader` and `exports-loader`
config.module.rules.push({
  test: (resource) => resource.includes("/@jspsych-contrib/plugin-"),
  use: (info) => {
    if (info.descriptionData.main) {
      // The `main` field is not set in the IIFE plugin template, so we consider everything with
      // a `main` field non-IIFE and ignore it here.
      return [];
    }

    // Extract the global variable name of the plugin
    const pluginVarName = /^var ([a-zA-Z]+) = \(function/m.exec(
      readFileSync(info.resource).toString()
    )[1];

    return [
      "imports-loader?type=commonjs&imports=single|jspsych|jsPsychModule",
      `exports-loader?type=commonjs&exports=single|${pluginVarName}`,
    ];
  },
});

[jodeleeuw]

We might be able to add an extra build step that creates an ES/commonjs module based on the IIFE file. But that would be pretty hacky and nothing I'd like to maintain. Maybe mention the imports-loader exports-loader workaround somewhere instead?

That works for me; thanks for the clarification!

[kinleyid]

Hi folks, would it be helpful for me to simply rewrite the code using the TS template? I would be happy to if it would make it more usable.

[bjoluc]

@kinleyid That's not directly necessary given the workaround - but it would sure be great!