Trying to create some reusable ponents for our Electron screen using lit-html. When I attempt to add an example ponent I run into an error.
Using electron: ^5.0.6
Trying to import module my-element.js (most of this code is example code and I'm just trying to get it working)
<head>
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="/@webponents/webponentsjs@latest/webponents-loader.js"></script>
</head>
<body>
<!-- Works only on browsers that support Javascript modules like
Chrome, Safari, Firefox 60, Edge 17 -->
<script type="module" src="my-element.js"></script>
The module my-element.js contains the following:
import {LitElement, html, css} from 'lit-html';
class MyElement extends LitElement {
static get properties() {
return {
mood: {type: String}
}
}
static get styles() {
return css`.mood { color: green; }`;
}
render() {
return html`Web Components are <span class="mood">${this.mood}</span>!`;
}
}
customElements.define('my-element', MyElement);
When the page loads I get an error
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.
I have tried different ways of importing lit-html but nothing has solved the error.
Ex. import {LitElement, html, css} from '../../node_modules/lit-html/lit-html';
Ex. import {LitElement, html, css} from '../../node_modules/lit-html/lit-html.js';
Trying to create some reusable ponents for our Electron screen using lit-html. When I attempt to add an example ponent I run into an error.
Using electron: ^5.0.6
Trying to import module my-element.js (most of this code is example code and I'm just trying to get it working)
<head>
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="https://unpkg./@webponents/webponentsjs@latest/webponents-loader.js"></script>
</head>
<body>
<!-- Works only on browsers that support Javascript modules like
Chrome, Safari, Firefox 60, Edge 17 -->
<script type="module" src="my-element.js"></script>
The module my-element.js contains the following:
import {LitElement, html, css} from 'lit-html';
class MyElement extends LitElement {
static get properties() {
return {
mood: {type: String}
}
}
static get styles() {
return css`.mood { color: green; }`;
}
render() {
return html`Web Components are <span class="mood">${this.mood}</span>!`;
}
}
customElements.define('my-element', MyElement);
When the page loads I get an error
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.
I have tried different ways of importing lit-html but nothing has solved the error.
Ex. import {LitElement, html, css} from '../../node_modules/lit-html/lit-html';
Ex. import {LitElement, html, css} from '../../node_modules/lit-html/lit-html.js';
2 Answers
Reset to default 8Electron and ES modules
Recent versions of Electron support ES modules out of the box so we instinctively think that this works without problems:
<script type="module" src="my-element.js"></script>
The thing is: if you load the main HTML file from the local file system, all other resources are also requested with the file:// protocol; however the HTML spec prohibits loading ES modules with such protocol for security reasons (more info here).
Solutions
Serve the source files
Use a static file server and load index.html from http://localhost:<server_port> instead of the file system (ie es-dev-server works well with LitElement).
Use a module bundler
Such as Rollup or Webpack, so you only have to load the bundle as a normal script. This way you can take advantage of tree shaking to remove unused code as well as other pilation/bundling benefits.
Use TypeScript/Babel
Both can transform es module statements to monjs (require).
Use monjs
Electron's Node integration allows you to require() CJS modules.
Register a custom protocol
See here.
A note on bundlers
Using a bundler may seem inconvenient because it concentrates the load on a single js file; however in Electron environments where source files are almost always inside the local package - and therefore network latency is not an issue - it may even result in an increased performance. Also, both Rollup and Webpack support code splitting and dynamic imports so you can still perfectly follow optimization patterns such as the App Shell Model.
you have to export what you want to import first, then you can do stuff. it should work fine on firefox too.