Help with the typescript and playcanvas-sync!

Help & Support
1

I use playcanvas-sync and vscode to write typescript code, and get the output .js file like:

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.MapEditor_UI = void 0;
var pc = require("../../../libs/playcanvas");
var MapEditor_UI = (function (_super) {
    __extends(MapEditor_UI, _super);
    function MapEditor_UI() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return MapEditor_UI;
}(pc.ScriptType));
exports.MapEditor_UI = MapEditor_UI;

this is not a playcanvas js script !

2

And i try use “module”: “es6” and “target”: “es6” , get this

import * as pc from "../../../libs/playcanvas";
export class MapEditor_UI extends pc.ScriptType {
    initialize() {
        console.log("MapEditor_UI  initialize");
    }
}

and run with error “Uncaught SyntaxError: Cannot use import statement outside a module”

3

Hi @Tidus,

Yes, you can’t load module scripts in the PlayCanvas editor right now. Modules normally requires this to load:

<script type="module" src="script.js"></script>

There is a workaround though, to load your module script using Javascript from another PlayCanvas script. Here is an example module loader I use on my PlayCanvas projects. You need to pass two attributes when you use this script, the script module asset and a name for your global object that this module will be assigned to.

var ModuleLoader = pc.createScript('moduleLoader');

ModuleLoader.attributes.add('moduleAsset', {
    type: 'asset',
    assetType: 'script'
});

ModuleLoader.attributes.add('className', {
    type: 'string',
    default: 'ScriptClassName'
});

// initialize code called once per entity
ModuleLoader.prototype.initialize = function() {
    
    if(!this.moduleAsset) return;

    let path = this.moduleAsset.getFileUrl();

    // --- check if it's an absolute path, if not update
    if (path.indexOf('http') !== 0 && window.location.origin.indexOf('launch.playcanvas.com') === -1) {
      path = window.location.origin + window.location.pathname + path;
    }    

    import(path).then( (module) =>{
        window[this.className] = module[this.className];
    });
};

Otherwise you need to rework the way your TypeScript project builds to produce a regular non-module build.

4

:no_mouth: ok ,i will use js instead of ts, and wish the editor will update.

5

On the local PC, you will have to compile the Typescript to work within the browser. Some of our users use Webpack and force ES5 transpiling before uploading to PlayCanvas.

1 Like