BModal: Critical issue that makes bootstrap-vue-next unusable on production (memory leak)

[m-demydiuk]

Describe the bug

Adding a BModal component leads to a memory leak and app remount in an infinite loop. We have a CrudCard component, that has nothing but BOverlay, BCard, and BModal.

<script setup lang="ts">
import { BOverlay, BCard, BModal } from 'bootstrap-vue-next';
console.log('CrudCard script setup');
// const a = 1;
</script>

<template>
	<BOverlay>
		<BCard no-body></BCard>
		<!-- <BModal>Hello</BModal> -->
	</BOverlay>
</template>

Example 1: BModal is commented. When the page is loaded, if I comment/uncomment line // const a = 1;, after hot reload, I just see another entry in console:

Example 2: BModal is not commented. When the page is loaded, if I comment/uncomment line // const a = 1;, after hot reload, page freezes, and app start to remount in the infinite loop. In the console I see 101 message and after that errors:

There is another opened issue, but I am not sure if it is the same problem. https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1670

Reproduction

https://stackblitz.com/edit/github-zyocm5?file=src%2Fcomponents%2FComp.vue

Used Package Manager

pnpm

Validations

• [X] Have tested with the latest version. This is still alpha version and sometime things change rapidly.
• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• github-zyocm5 (Open reproduction)

[xvaara]

I'm a little confused. You say unusable in production? Are you using hot module reload in production? It's a development feature, not meant for production systems.

@VividLemon this only happens when using build version of bvn, not the dev version. Maybe some new vue optimisation biting us in the ass again?

[m-demydiuk]

I'm a little confused. You say unusable in production? Are you using hot module reload in production? It's a development feature, not meant for production systems.

@VividLemon this only happens when using build version of bvn, not the dev version. Maybe some new vue optimisation biting us in the ass again?

For now, we have this issue with hot reload. So we disabled hot reload. But it doesn't mean this issue won't appear in production. There can be other cases that can cause this issue. And that's why I think it is not usable on production.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. It will not be auto-closed

[VividLemon]

Unable to reproduce https://github.com/bootstrap-vue-next/bootstrap-vue-next/assets/31498096/a4b305a2-5b61-4a08-8cfc-a201e433fe1d

[VividLemon]

ucndefined.zip