Components like bp-input or bp-password failed with an error message (lit)

[amiceli]

Currently I'm working on a side project use Vue 3.
I've installed @blueprintui/components, version 1.18.1.

I import component in main.ts :

import '@blueprintui/components/include/button'
import '@blueprintui/components/include/header'
import '@blueprintui/components/include/dialog'
import '@blueprintui/components/include/forms'
import '@blueprintui/components/include/input'

Button, header, switch, etc works except input or password.

I've following error in console :

[The following properties on element bp-range will not trigger updates as expected because they are set using class fields: name. Native class fields and some compiled output will overwrite accessors used for detecting ](rror: The following properties on element bp-range will not trigger updates as expected because they are set using class fields: name. Native class fields and some compiled output will overwrite accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.)

An example of my Vue component :

<template>
    <div>
        <bp-button
            @click="showDialog()"
            status="accent"
        >
            Ajouter
        </bp-button>

        <bp-field>
            <label>label</label>
            <bp-input></bp-input>
            <bp-password></bp-password>
            <bp-range></bp-range>
            <bp-switch checked></bp-switch>
        </bp-field>
    </div>
</template>

<script setup lang="ts">
    import { onMounted, onUpdated, ref } from 'vue'

    onMounted(() => {
        showDialog()
    })

    function showDialog () {
        // 
    }
</script>

Button works but all other components inside bp-field and bp-field itself failed.

I tries to install another versions by I still have that error.

Thanks for your help.

[coryrylan]

I'm looking into this. I was able to create a reproduction with stackblitz. I'm guessing this has something to do with TS versions https://stackblitz.com/edit/blueprintui-vue-deqeh6?file=src%2FApp.vue

[amiceli]

Maybe it can help you, I replaced import '@blueprintui/components/include/input' in main.ts file with :

<script type="module">
    import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/input.js/+esm';
</script>

In index.htmk and it works. I see bp-input and error message is not sent.

Before that, I tried to have same Typescript version.
In my project I used 5.1.6, I tries 5.0.4 like Blueprint. But it does nothing.

[amiceli]

If you've published a beta version, I can try on my project if you want ;)

[github-actions]

🎉 This issue has been resolved in version 1.18.2 🎉

The release is available on:

• GitHub release
• v1.18.2

Your semantic-release bot 📦🚀

[amiceli]

Thanks @coryrylan, I try on my project everything is ok ;)