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

Asked 8/8, 2019 at 16:22 Answered 16/10, 2021 at 20:34

javascript html electron mime-types lit-html

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

Dominquedominquez answered 8/8, 2019 at 16:22 Comment(0)

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.

Leitmotiv answered 17/8, 2019 at 13:35 Comment(3)

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. – Dominquedominquez 27/8, 2019 at 20:54

In electron environments, unfortunately, yes (not necessarily a bundler, others of the above solutions may be fine depending on your needs). – Leitmotiv 28/8, 2019 at 17:41

This is a great explanation! A good addition to what I found about addressing this issue in the browser: #47403978 – Molluscoid 23/1, 2020 at 18:42

you have to export what you want to import first, then you can do stuff. it should work fine on firefox too.

Unfathomable answered 16/10, 2021 at 20:34 Comment(1)

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 – Hula 16/10, 2021 at 21:38

Electron and ES modules

Solutions

Recommended topics

Hot tags