Electron web components unable to import component as module

Question

This works just fine as a web application (in the chrome browser). I am using lit-html and polymer to create a web component.

src/components/helloWorld.js

import { html, render } from "lit-html";

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });

    const template = html`<h2>Hello World</h2>`;

    render(template, this.shadowRoot)
  }
}

window.customElements.define("hello-world", HelloWorld);

src/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">    
  </head>
  <body>
    <hello-world></hello-world>
    <script type="module" src="components/hello-world.js"></script>
  </body>
</html>

Yet trying to implement this in Electron fails. The specific error is:

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.

So I am interpreting the error to point to this as the problem:

<script type="module" src="components/hello-world.js"></script>

I am puzzled as to why it would work as a web app but not in electron when they both use chromium. I have researched this topic and have found some stack overflow questions but could not fully understand the answers.

This is what I have read that seems relevant: Electron ES6 module import

Electron web components unable to import component as module

0 Answers0