Twine / ES6 / Import / Module

Twine Version: 2.3.x
Story Format: Sugarcube 2.35

I’ve been doodling along with Twine+Sugarcube, learning and modifying and having a ball. I wanted to add an npm package to the mix, so I did a classic “npm -i moduleName --save” and all looks fine. I use “import suchAndSuch from soAndSo”, no problem. But when I load the resulting game code in the browser, I get “Cannot use import outside of a module”. I tried changing the type of the app.js import directly (a hack!) in the HTML file to module but that just threw more errors (the original type is “text/twine-javascript”, so yeah, probably not suppose to change that). I have a feeling I’m just doing this wrong. Not even sure this is a Twine question as such, more likely I’ve screwed up my compilation setup.

To be clear, I’m actually coding in Typescript, and compiling that into ES6. The package I was trying to import was spotlight.js (for showing images).

package.json (excerpted)

    "type": "module",
    "browserslist": [
        "defaults"
    ],
    "devDependencies": {
        "@types/jquery": "^3.5.8",
        "sass": "^1.43.4"
    },
    "private": true,
    "dependencies": {
        "@types/twine-sugarcube": "^2.34.2",
        "spotlight.js": "^0.7.8"
    }

tsconfig.json

{
  "include": ["src/ts/**/*"],
  "compilerOptions": {
    "strict": false,
    "target": "ES2015",
    "sourceMap": true,
    "outDir": "src/js",
    "lib": [
      "dom",
      "ES2015"
    ],
    "module": "ES2015",
    "moduleResolution": "Node",
  }
}

Meh, I just rolled my own image viewer overlay code. It’s simple enough. But still curious about how to use “import” in a Twine context.

As shown in the compileJavaScript() function of the SugarCube project’s build.js file the engine is transpiled to ES5 (using Babel) before it is included in the template file being generated.

Which means you’re trying to use the ES6 import feature in an ES5 base project.

Did you try transpiling your Typescript into ES5 instead?

1 Like

That would explain it. I’ll rework what I’m doing for ES5.

Nope, turned out I botched my webpack settings. Got my development environment working now. (And then I discovered ChapelR has made a build environment – GitHub - ChapelR/tweego-setup: A blank Tweego project with all the trimmings. Uses node and gulp. – so I could have saved myself a bunch of time.)