Are Javascript Modules possible with UI:HtmlDIalog?

Hi !

I recently have the idea to use the threejs library to extends the possibilities of my extension in its UI:HtmlDialog.
But this javascript library is bundled in modules. And JS modules can’t be loaded from “file://” urls and I can’t use CDN servers to stay compatible with offline usage.

Does anyone know if it’s possible to use JS modules in SketchUp extensions ?

Have a nice day :sunny:

Possibly with SketchUp 2019 and later (which uses Chrome 64.) SketchUp 2021.1 upgraded to CEF 88.

I think modules require Chrome 61 and later. Using the dynamic import() function requires Chrome 63 minimum.

I would think just use a relative path (from the HTML document) like we do for most all JS files deployed with extensions.

Hi @DanRathbun,

Thanks for your reply. You’re right that the minimal SU version will be 2019.

No, modules should be loaded from a webserver because module loader check the MIME type and local file system doesn’t returns any MIME type.

Else, I found that three.js release r147 doesn’t impose js modules :+1:

I recently asked a very similar question too!

I’ve also found that is not possible to use modules, probably because HtmlDialog loads files with the file:// protocol (though it would be nice to have a Sketchup developer confirm this).

I am getting around this by using Vite in library mode, but you could do something similar with Rollup, Webpack, etc. But I would like to find a way around this. The vast majority of modern libraries are distributed in modules.

That depend entirely on how you use it. The most normal way HtmlDialogs are used are by loading local resources bundled with the Extension using .set_file. But you can load from an http(s) source using set_url. But you cannot load local files using set_url. You’d in that case need to spin up a local webserver and serve to localhost, which quickly adds overhead to what you need to bundle with your extension. (Not to mention that you’d have to find an unused port, and potentially battle with local firewalls)

2 Likes