Typescript, playcanvas and external libraries


Continuing the series of typescript-related questions :wink:
Using Typescript offline in vscode, bundling the scripts into one “game.js” file with webpack and uploading changes with Poseidon.

So, I wanted to use an external lib; moment.js.

#round 1: I installed it with npm and webpack bundled it in my game.js. Unsurprisingly, this didn’t work too well! I don’t think the editor very much liked parsing it in the same context as the scripts.

#round 2: I downloaded the moment.js file from the site and uploaded it to my playcanvas project. I then changed my webpack config to have moment.js as an external lib:

  externals: {
    moment: 'moment'

Built, uploaded, but alas - the editor wouldn’t have it. ReferenceError, moment is not defined when I press the parse button on game.js. But! When I run the game, everything works exactly as it should.
I have a feeling there’s a simple solution here, to make the editor catch on :slight_smile:

The question is basically, how should I be working with external libs in a typescript project for playcanvas? But in case you’d like some more info about the error:

assets-script-parse-worker.js:278 Uncaught ReferenceError: moment is not defined
    at Object.moment (external "moment":1)
    at __webpack_require__ (bootstrap:19)
    at Object../src/countdown.ts (countdown.ts:2)
    at __webpack_require__ (bootstrap:19)
    at Object../src/main.ts (main.ts:4)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
    at parseScript (assets-script-parse-worker.js:278)
    at onmessage (assets-script-parse-worker.js:7)

The top of the stacktrace corresponds to:

module.exports = moment;

The rest is just standard webpack stuff.

Also for your convenience, moment.js can be found here: https://momentjs.com/downloads/moment.js

So I went back to trying #1. After all, if moment.js is included in game.js, then at least i wouldn’t have any problems with referencing it (or the whole script order problem again). Oddly, it worked this time around. Not entirely sure why.