HtmlDialog CEF support for ES modules?

In building a plugin using the HtmlDialog for its interface, I’ve been getting into the world of front-end javascript development, where ES modules are now the standard for structuring an application. However as far as I can tell, ES modules cannot be loaded in an HtmlDialog - in a simple test file where I import a module using <script type="module" src="./main.js"></script>, the script doesn’t load, and checking the Dev Tools (accessed by right-clicking the HTMLDialog), shows the following message:

Failed to load module script: The server responded with a non-JavaScript MIME type of “”. Strict MIME type checking is enforced for module scripts per HTML spec.

If HtmlDialog is loading using the file:// protocol from the local filesystem, then this is exactly what you’d expect, but it’s really inconvenient for testing a dialog in Sketchup to have to re-build the whole package every time I want to make a change. Is there a way to get Sketchup’s HtmlDialog to successfully load a <script type="module"...> tag?

Just a thought as ES modules are becoming the norm in WEB Development.

Have you tried using <script type="cjs" src="main.js" </script> setting it to look for a common javascript file type? Just to see if it will load?

SketchUp internially may not be up to date with the ES6 modules in the way NODE was up until a few years ago. And can only interperate Common JavaScript file types.

So yes, modules are the new way for Web Dev’s in the browser. But SketchUp API for javascript may be requiring the older Common JavaScript file format. I was learning Express a year or two age and this drove me crazy. As Node.js had not been wired to accept module imports yet and only accepted / recognized the .js or .cjs file type extention.

I am terrible at trying to explain things but this may shed some light on things from MDN Web Docs_

Their words not mine::~:// " Aside — .mjs versus .js

Throughout this article, we’ve used .js extensions for our module files, but in other resources you may see the .mjs extension used instead. V8’s documentation recommends this, for example. The reasons given are:

  • It is good for clarity, i.e. it makes it clear which files are modules, and which are regular JavaScript.
  • It ensures that your module files are parsed as a module by runtimes such as Node.js, and build tools such as Babel.

However, we decided to keep using .js, at least for the moment. To get modules to work correctly in a browser, you need to make sure that your server is serving them with a Content-Type header that contains a JavaScript MIME type such as text/javascript. If you don’t, you’ll get a strict MIME type checking error along the lines of “The server responded with a non-JavaScript MIME type” and the browser won’t run your JavaScript. Most servers already set the correct type for .js files, but not yet for .mjs files. Servers that already serve .mjs files correctly include GitHub Pages and http-server for Node.js.

This is OK if you are using such an environment already, or if you aren’t but you know what you are doing and have access (i.e. you can configure your server to set the correct Content-Type for .mjs files). It could however cause confusion if you don’t control the server you are serving files from, or are publishing files for public use, as we are here.

For learning and portability purposes, we decided to keep to .js.

If you really value the clarity of using .mjs for modules versus using .js for “normal” JavaScript files, but don’t want to run into the problem described above, you could always use .mjs during development and convert them to .js during your build step. "

Good luck with it and I am learning and wish I could be more helpful. But I like these types of issue as a challenge to try and figure out how to make it work. Or find the correct solution that will.

My guess is like NODE a few years was not set to handle modules, SketchUp may be in the same boat. Because you are not running your files inside the web browser, you are running inside of SketchUp ??

If you figure it out let me know and will look for new reply to the thread.

SketchUp does not have an " API for javascript ".

It includes a build of the Chrome Embedded Framework (aka CEF,) which is currently at v 88.0.4324.150.
CEF is a bit different security-wise than a full Chrome standalone browser.

So perhaps ask this question per modules in a CEF forum ?
(Or see if their is an open issue on modules in the CEF issue tracker.)

1 Like

Thank you for the information as I have a general understanding of what SketchUp is doing with the html and javascript.But nothing compared to what I know or any working knowledge. That I have is outside of SketchUp with full web browsers. For web pages and sites plus backend workings.

I figured SketchUp had to implemented something in the way of a " browser" to connent the Warehouse and such. I even found a small script years back that allowed you to enter a url … HomeDepot for example. From the built-in Ruby console and their web site would open from inside SketchUp.
Great for getting dimensions or other specs for cabinet or building propucts for your model. Without having to leave SketchUp.

I just Wikipedia CEF

The Chromium Embedded Framework (CEF ) is an open-source software framework for embedding a Chromium web browser within another application. This enables developers to add web browsing functionality to their application, as well as the ability to use HTML, CSS, and JavaScript to create the application’s user interface (or just portions of it).

Good to know for the future and helps to add insight to why he can’t get a script to run as a module. It being limited in functionallity compared to Edge or Chrome and FireFox and the rest.

It is the the same with Node.js for running javascript to a server then back to the client. Node lacks many parts that ship with your web browser (client-side) functionality and the DOM.

So things that are required or work in and for the browser just don’t exisit in NODE.

THANKS for your time and explaination.

Peace …

The problem is web modules in an HtmlDialog for SketchUp extensions is that you’ll be loading content from file://, and web modules require http(s)://.