Issue with Vorple, require(), and webpack

Authoring Inform 7
1

Hey all,

I’m revisiting an old project with another IntFic community member, and we’re trying to use webpack in order to get access to import * from ___ and require() for our Vorple i7 project. But for some reason, Vorple is currently unable to read the main.bundle.js file that we bundled. When we used the wikipedia_query function in the original file main.js, it works normally. But with the bundled main.bundle.js file (even when minification was turned off) we cannot access any of the JS in the file.

Any tips on debugging or namespacing would be greatly appreciated!

1 Like
2

Wasn’t able to edit the above message, but wanted to add:

Alternatively, if anyone’s figured out alternatives for webpack that let you use import or require() to add JS modules into a Vorple project, any info would be great!

1 Like
3

I wish I could answer your question, but I’m just getting into Vorple myself. It’s unusual to see a request for help go this long without a reply. I hope you get a response because I suspect I might be asking something similar in the future.

4

A few diagnostic questions:

  1. Any errors in the browser console?
  2. What Webpack options are you using?
  3. What module/output format in Webpack?
1 Like
5

Sorry, I missed the original post. If you mean that you can’t access Javascript stuff from inside Inform, the trick is to expose the functions and variables in the global window scope. Webpack encapsulates everything so that things aren’t accessible from outside.

So if you have a function myFunction that you want to call from Inform:

function myFunction() {
  // ...
}

window.myFunction = myFunction;

Now you can do execute JavaScript command "myFunction()"; in Inform and it’ll run the JS function.

You can check here how Vorple does it for its own namespace (also built with Webpack): index.js at GitHub

1 Like
6
  1. Errors

Main.js (which is included in the story file) looks like this:

var rand = require('random-number');

function randomNumber() {

    var gen = rand.generator({
        min:  -1000,
        max:  10000,
        integer: true
        });

    var ran = gen();
  return ran;
}

When I call the function within the story file, I get this error in the console:


randomNumber() JavaScript code from story file threw an error: Cannot read properties of undefined (reading 'generator')

randomNumber() Error
    at r (error.js:23:11)
    at Proxy.j (glk.js:478:5)
    at Object.resume (quixe.js:153:13)
    at glk.js:341:8
    at M (glk.js:247:13)
    at Proxy.sendLine (glk.js:137:5)
    at C (prompt.js:622:20)
  1. Webpack options:
        port: 3010,
        watchContentBase: true,
    },
    optimization: {
        minimize: false
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                //exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
  1. Target is node, I include node_modules, minimization is false

My questioning was around being able to use packages and modules in the main JS file. For the test case I used NPM to install a ‘random-number’ package, and I tried to include node_modules in webpack minification so that I can learn how to include modules in the project.

1 Like
7

Update: Still trying to figure this out, but as a quick workaround, I was able to add multiple JS files with a simple comma:

Release along with JavaScript "app.bundle.js", the introductory booklet, JavaScript "wiki.js", and a library card.

As an example, if anyone’s curious (also note it still works with an Oxford comma!).

If anyone’s figured out how to make import/require work in the context of a Vorple project (or what logic I’d need to add into the Vorp interpreter, now that everything’s open-sourced), it’d be greatly appreciated!

8

This isn’t as much a Vorple/Inform issue as it is a Webpack usage issue. You can always test things like this by running the code without Vorple in a “clean” HTML file and checking that it works without Vorple.

Webpack assumes that it gets to work with all relevant Javascript code, so excluding parts from the Webpack compilation is going to be difficult to handle. Specifically, you can’t require packages later outside the Webpack bundle – they don’t exist as modules anymore, they’ve been baked into the bundle.

What I would do is this:

  • Have Webpack compile all Javascript you have, including wiki.js in the last post’s example. Include only app.bundle.js in Inform.
  • Identify all JS functions and variables you need to call from within Inform, and have a separate JS module that imports them and exposes them in the window namespace as shown earlier. Make sure this module is included in the Webpack compilation (import it in index.js for example.)

Then you’ll have all JS in the Webpack bundle, and you don’t need to try to pry stuff from inside it for outside JS to use.

9

You were right; I think I have it figured out!

Unsure what the problem was with webpack, but we went back to an old build, added window.MyFunction to each of the functions, and messed around with the interface rules to:

  • be able to call a function that was dependent on an imported module
  • have the value(s) returned be saved in the window object
  • write the function dependent on the module such that each call erases the value that was placed in the window object

Thank you all for your assistance!

1 Like