Using ES6 Modules in Online Editor

My team is using PlayCanvas for a school project, and so far we’ve been very happy with the framework. However, we’re running into issues with ES6 modules. Specifically, importing and exporting them. We have tried using export default, module.exports, and exports.class-name-here with no success, and since we’re using the online editor we have no way to set the files as modules in index.html.

You can view our project at PlayCanvas | HTML5 Game Engine.

Thank you in advance!

AFAIK, you won’t be able to use modules as you would have class them as type ‘module’ in the html markup which you can’t change in the PlayCanvas Editor.

I can’t see a technical reason why you need to use export/import in a PlayCanvas project if all the scripts are created by yourself?

Hi yaustar

without module.exports
how can you access directly to another script and run with its functions?

Please look at this thread: Other-script referal (Global variables)

If you have used Unity, it’s the same principle. Get a reference to the gameObject/entity and get the script from it to access the public variables and functions.

in an attribute like this yes?

and how can i assign it via code?

The entity can be referenced by an attribute (most common) or can be from findByName/Tag or a manner of by other means (global/static variables, etc)

@yaustar what is the current workflow for using es6 imports/exports? Adding the jshint in the editor removes the code warnings, but when you run in the scripts are not flagged as modules and therefore raise Cannot use import statement outside a module exceptions. Is there a way to flag this to the bundler/compiler?

There’s no official Editor support for modules but you can load modules dynamically as a workaround:


Fantastic, thanks for your help. Is there any plan to add support for import/export to the transpiler @yaustar?

There aren’t any immediate plans AFAIK unfortunately. I will add the request to the repo though

Edit: feature request: