Getting error "Strict MIME type checking is enforced for module scripts per HTML spec" when trying to import project

javascript html electron mime-types lit-html

15,916

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.

15,916

islalobo

Updated on June 04, 2022

Comments

islalobo almost 2 years

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';

islalobo over 4 years

Let me see if I understand this correctly, to use lit-html or any library that uses ES6 Modules we will have to use a bundler tool, like babel.
Umbo over 4 years

In electron environments, unfortunately, yes (not necessarily a bundler, others of the above solutions may be fine depending on your needs).
JulianJohannesen over 4 years

This is a great explanation! A good addition to what I found about addressing this issue in the browser: stackoverflow.com/questions/47403478/…
Lajos Arpad over 2 years

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review