Hey there!
I’m trying to create a custom Home Assistant panel with webcomponents and Polymer. With Polymer3.0 they moved on from HTML imports to ES6 module imports, so I am aiming to use this functionality as well. I can see that the internal frontend components have all been migrated to the new syntax with JS modules and the internal HTML template-literal templates.
In the project I want to employ a completely dynamic module import system. As I am a bit inexperienced with JS modules I don’t know how viable this is, but by “dynamic module import” I mean that at design time nothing is known about potential components to be imported at runtime. I want a kind of hot-swappable plug-in folder filled with JS module files (the reason being that this way I can easily expand and customize these plugins).
This is where my problem comes in: I can’t find a way to use JS modules in my custom panel.
I found a GitHub post about the new js_url option in custom_panel using iframes, however reading the source code this resolves to a simple JS file load and not a module import. You can see this code here. With the dev frontend I changed this line to a module import script:
import { loadJS, loadModule } from '../../common/dom/load_resource.js';
...
JS_CACHE[panelConfig.js_url] = loadModule(panelConfig.js_url);
This will create a script tag with a type=“module” attribute, as defined in ES6.
This standard requires a strict MIME type check, but home assistant only ever servers text/plain MIME types. So even after changing the source code, the browsers throw the following error:
Failed to load module script: The server responded with a non-JavaScript MIME type of “text/plain”. Strict MIME type checking is enforced for module scripts per HTML spec.
My two main questions would be: first, am I doing something wrong? If so, what is the correct configuration for ES6 module based custom panels?
Second, if you really can’t use modules, does anyone know if this is intented functionality?
Also I should mention that using webpack I can easily make a bundled app that is composed of modules, because webpack compiles this into a regular script, which works with the simple script tag. But since webpack requires a statically analyzable dependency tree, dynamic runtime imports are not allowed and are not feasible in any way based on my research.
Thanks in advance for any help you can provide!