Getting error "Strict MIME type checking is enforced for module scripts per HTML spec" when trying to import project
Trying to create some reusable components for our Electron screen using lit-html. When I attempt to add an example component 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.com/@webcomponents/webcomponentsjs@latest/webcomponents-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';
Answer
Electron 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 compilation/bundling benefits.
Use TypeScript/Babel
Both can transform es module statements to commonjs (require).
Use commonjs
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.