how to Implement lit-element-bootstrap package in

2019-08-17 07:42发布

问题:

I would like to implement lit-element-bootstrap package in lit-element.

I am getting following error in console, Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec

//header.js
import { LitElement, html, css } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';
import  'https://unpkg.com/lit-element-bootstrap@1.0.0-alpha.10/lit-element-bootstrap';

export class Header extends LitElement{
    constructor() {
        super();
    }
    render(){
        return html`
        <bs-alert primary>
         <div>A simple primary alert—check it out!</div>
        </bs-alert>
        `;
    }
}
customElements.define('header-element', Header);


//index.html

<!doctype html>
<html>
  <head>
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-bundle.js"></script>
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-loader.js"></script>
     <script type = "module" src = "../components/header.js"></script>
  </head>  
<body>   
<header-element></header-element>
 </body>
</html>

回答1:

The URL you are trying to import from is getting redirected (302).

Current URL: https://unpkg.com/@polymer/lit-element/lit-element.js?module

Try changing it to: https://unpkg.com/@polymer/lit-element@0.7.1/lit-element.js?module

Not sure if you should be loading it from this URL always, you can download the file and import it from your directory, rather than downloading it from this new URL. As this new URL can also change in future.