Help with the typescript and playcanvas-sync!

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 (, 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;
exports.MapEditor_UI = MapEditor_UI;

this is not a playcanvas js script !

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”

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('') === -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.

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

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