ui5-webcomponents: ui5-step-input throwing in lit-html 2.2.2

Bug Description

<ui5-step-input> breaks in lit-html 2.2.2 and snowpack 3.8.8. The following error is thrown whenever trying to render the element:

lit-html-5d8ac96f.js:formatted:74 Uncaught (in promise) Error: invalid template strings array
    at C (lit-html-5d8ac96f.js:formatted:74:15)
    at new E (lit-html-5d8ac96f.js:formatted:86:21)
    at N._$AC (lit-html-5d8ac96f.js:formatted:277:53)
    at N.T (lit-html-5d8ac96f.js:formatted:263:45)
    at N._$AI (lit-html-5d8ac96f.js:formatted:247:99)
    at x (lit-html-5d8ac96f.js:formatted:46:14)
    at Function.litRender (parameters-bundle.css-24a37f84.js:3141:2)
    at updateShadowRoot (parameters-bundle.css-24a37f84.js:1776:22)
    at HTMLElement._render (parameters-bundle.css-24a37f84.js:2663:4)
    at renderImmediately (parameters-bundle.css-24a37f84.js:768:15)

Expected Behavior

<ui5-step-input> should not throw an error and should render correctly.

Steps to Reproduce

Install lit-html 2.2.2
Install snowpack 3.8.8
Create an html tagget template literal and try to use an instance of <ui5-step-input></ui5-step-input>

Isolated Example

I was having trouble getting the Code Sanbox environment setup and reproducing the issue there. If you use the versions of lit-html and snowpack that I’ve indicated, this file will show you the issue:

<!DOCTYPE html>

<html>
    <head>
        <script type="module">
            import "@ui5/webcomponents/dist/StepInput.js";
            import { html, render } from "lit-html";

            class TestElement extends HTMLElement {
                connectedCallback() {
                    render(html`<ui5-step-input></ui5-step-input>`, this);
                }
            }

            window.customElements.define("test-element", TestElement);
        </script>
    </head>

    <body>
        <test-element></test-element>
    </body>
</html>

Context

UI5 Web Components version: 1.2.4
OS/Platform: Ubuntu 20.04 focal (x86-64)
Browser: Chrome Version 100.0.4896.127 (Official Build) (64-bit), Brave Version 1.24.85 Chromium: 90.0.4430.212 (Official Build) (64-bit), Firefox Version 99.0 (64-bit)
Affected component: ui5-step-input

Priority

Low
Medium
High
Very High

Stakeholder Info (if applicable)

Organization: Demergent Labs
Business impact: Just an inconvenience for now, it would be nice to use this type of input but another input type will be okay for the time being

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 15 (8 by maintainers)

Most upvoted comments

@lastmjs as a workaround until a fix is prepared and released, you can force the same lit-html version to be used by ui5-webcomponents and your app.

Just add the following to your package.json

  "resolutions": {
    "@ui5/webcomponents/**/lit-html": "2.2.2"
  },

remove node_modules and use yarn followed by yarn start (you will need to install yarn in case you don’t have it already).

This will make your all parts of your project use the same version of lit-html, essentially the same as the fix.

pskelin on Apr 26, 2022

I made a quick workaround and here’s a hopefully reproducible example: https://github.com/MapTo0/snowpack-ui5-webcomponents/pull/1

lastmjs on Apr 21, 2022