VAS Plugin Error with webpack about jspsych-contrib HOT 5 OPEN

@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.

from jspsych-contrib.

@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}`,
    ];
  },
});

from jspsych-contrib.

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!

from jspsych-contrib.

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.

from jspsych-contrib.

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

from jspsych-contrib.