Failed to fetch dynamically imported module: http://127.0.0.1:8081/node_modules/@ui5/webcomponents/dist/Button.js

Describe the bug I want to create a custom element extending lit-element. Within this element I want to use <ui5-button/>. Unfortunately my initial import for the button fails:

import('@ui5/webcomponents/dist/Button');

Log output / Any errors in the console

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://127.0.0.1:8081/node_modules/@ui5/webcomponents/dist/Button.js

Failed to load module script: The server responded with a non-JavaScript MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec.

Root cause seem to be the import calls for json files in Button.js, e.g. import belize from './themes/sap_belize/Button.json';

To reproduce

import { LitElement, html } from 'lit-element';
import('@ui5/webcomponents/dist/Button');
export class MyElement extends LitElement {
  render() {
    return html`
      <ui5-button>Hello world!</ui5-button>
    `;
  }
}
customElements.define('my-element', MyElement);

Expected behavior import call should just work as expected

Context

• UI5 Web Components version: 0.7.0
• Browser: Chrome 72.0.3626.109
• Other information: polymer-cli 1.9.6, lit-element 2.0.1

Affected components all

[pskelin]

@pwasem the latest release on npm (0.8.0) should now work for your setup (datepicker, panel and text area will be addressed in a future release, but the rest should be fine now).

Could you give it a try and let me know if there are any problems?

[pskelin]

@pwasem: you have a valid point, thanks for bringing it through.

I did a bit more reasearch and I think we can achieve for most components to be JS-only imports without an additional configuration, so I’ll post an update here soon.