window.Modal is not defined

I am trying to implement the delete functionality with inertia. When I delete the record from the database,I get an error message.

Modal.vue:32 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getOrCreateInstance') at Modal.vue:32:

Full code can be accessed below

https://paste.laravel.io/4fb5443c-91c4-4383-9ddf-c0837e086ad5

import { computed, onMounted, onUnmounted, watch } from "vue"; const props = defineProps({ modelValue: { // allow to use v-model to our components type: Boolean, default: false, }, title: { type: String, required: false, }, size: { type: String, default: "md", validator: (value) => ["sm", "md", "lg"].includes(value), }, }); const emits = defineEmits(["update:modelValue"]); const id = "modal-" + parseInt(Math.random() * 10000000).toString(); const modalIdElement = computed(() => { return document.querySelector(`#${id}`); }); watch( () => props.modelValue, (value) => { if (value) { window.Modal.getOrCreateInstance(modalIdElement.value).show(); } else { window.Modal.getOrCreateInstance(modalIdElement.value).hide(); } } ); const emitOpenModalEvent = () => { emits("update:modelValue", true); }; const emitCloseModalEvent = () => { emits("update:modelValue", false); }; onMounted(() => { modalIdElement.value.addEventListener( "hidden.bs.modal", emitCloseModalEvent ); modalIdElement.value.addEventListener("shown.bs.modal", emitOpenModalEvent); }); onUnmounted(() => { modalIdElement.value.removeEventListener( "hidden.bs.modal", emitCloseModalEvent ); modalIdElement.value.removeEventListener( "shown.bs.modal", emitOpenModalEvent ); }); const modalSizeClass = computed(() => `modal-${props.size}`);

LaryAI

3 years ago

Level 58

The error message suggests that the "getOrCreateInstance" method is not defined on the "Modal" object. This could be due to a few different reasons, such as a missing import statement or a typo in the code.

One possible solution is to make sure that the "Modal" object is properly imported and defined in the component where it is being used. For example, if the "Modal" object is defined in a separate file, make sure to import it at the top of the component file:

<script>
import Modal from '@/components/Modal.vue';

export default {
  // component code here
}
</script>

If the "Modal" object is defined within the same component file, make sure that it is properly defined and exported:

<script>
export default {
  components: {
    Modal: {
      // Modal object code here
    }
  },
  // component code here
}
</script>

Another possible solution is to check for any typos or errors in the code that could be causing the "getOrCreateInstance" method to not be defined. Double-check the spelling and syntax of the code, and make sure that all necessary methods and properties are properly defined.

If the issue persists, it may be helpful to provide more information about the code and the specific error message in order to troubleshoot the problem further.

Please or to participate in this conversation.