race condition and other oddities when using with Vite / Vue 3

[vesper8]

I've been using chessboard-element for well over a year within a Vue 2 project and I've never had any issues with it, it just worked perfectly.

Recently I migrated my project to Vue 3 / Vite and I noticed one pretty jarring issue.

It appears as though the board will ONLY load if the <chess-board> element is available BEFORE the import 'chessboard-element';

This didn't use to be a problem somehow, but since migrating to Vue 3, order really matters now and it's problematic. I've kind of hacked my way around the issue by including my import 'chessboard-element'; inside a child component every time I have a chess-board element, this ensures that the chess-board is available in the dom before its child component has finished mounting.

I'm a bit baffled as to what's causing change in behaviour all of a sudden.

It would be useful if there was a global (attached to window for example) command I could issue to "look for chess-board elements and activate" any new elements that weren't present the last time.

On a side note, I would also find it useful if there was a "ready" event that I could listen to on the chess-board.

If you have any ideas how I may work around this oddity in a less hacky way, I'd really love to hear it!

Many thanks

[vesper8]

I created an issue and three minimal reproduction repositories in order to illustrate the problem.

I'm unsure if the issues lies with this web component, or with the framework, or both.

But either way I'd love to hear your thoughts on what might be a possible solution @justinfagnani

Here's the issue with links to the reproduction repositories: vuejs/core#5925

[jacksonthall22]

Any update @vesper8? I'm considering using this in a new Vite/Vue3 project - is it worth it or should I just go with chessground?

[vesper8]

@jacksonthall22 I gave up and migrated to https://github.com/shaack/cm-chessboard, suggest you do the same!

Or chessground of course.. but chessground has that LGPL license so that is a deal breaker for me.