JavaScript import for lit-element gives me 404 not found error in browser

Question

I have installed lit-element via npm in ASP.NET MVC 5 solution. I am trying to create a starter tag as described in https://lit-element.polymer-project.org/guide/start guide. In browser, I get "GET http://localhost:64580/node_modules/lit-element/lit-element" net::ERR_ABORTED 404 (Not Found) in chrome.

<head>
    <script src="~/Scripts/my-element.js" type="module"></script>
</head>
<body>
    <my-element></my-element>
</body>

my-element.js

import { LitElement, html } from "../node_modules/lit-element/lit-element";

class MyElement extends LitElement {

    render() {
        return html`
      <!-- template content -->
      <p>A paragraph</p>
    `;
    }
}

customElements.define('my-element', MyElement);

Likely the file is not where you have it specified - one relative path, one fixed might be the issue here: http://localhost:64580/node_modules/lit-element/lit-element should perhaps be http://localhost:64580/Scripts/node_modules/lit-element/lit-element.js or some such — Mark Schultheiss, Apr 09 '19 at 11:00

score 0 · Answer 1 · answered Apr 09 '19 at 10:57

0

Modify import as

import { LitElement, html } from "lit-element";

answered Apr 09 '19 at 10:57

Namani Supriya

41
1
14

Well that's given in the documentation as well, doesn't work. – pranavn Apr 10 '19 at 06:33

score 0 · Answer 2 · answered May 21 '20 at 07:02

0

This can resolve this issue
Import like this

import {
  html,
  LitElement,
} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';

answered May 21 '20 at 07:02

Rishi Sahu

496
3
11

JavaScript import for lit-element gives me 404 not found error in browser

2 Answers2