Lately, I've been delving into Svelte and finding it quite enjoyable. It's my first encounter with a framework that has binding capabilities, and I've been happily working on some personal projects with it.
However, I've hit a roadblock trying to integrate bootstrap5. While I've managed to successfully import both the style sheets and JavaScript from the CDN, as well as locally within app.html, I'm now facing a challenge in opening a modal without requiring a button press (though not essential for my current project, I believe it may become necessary in the future). I've tried referencing bootstrap.Modal from the page.svelte file.
Here are the issues I encountered in attempting to achieve this:
When I try importing the library at the top of the script within +page.svelte using 'import bootstrap from "$lib/bs5/bootstrap.bundle.min.js"', I receive an error stating "document is not defined." I assume this is because the JS file is trying to reference document, which must be done using Svelte's onmount. However, I'm unable to figure out how to import within an onmount.
If I remove the import statement and load the JS file locally, I can reference "bootstrap.Modal" as needed, but VS Code/TypeScript doesn't support intellisense and consistently flags an error due to the lack of a direct reference to bootstrap.Modal. While this workaround functions, I suspect there might be a better way to address this issue. Essentially, it works but lacks intellisense support and constantly shows errors.
I came across "sveltestrap," but it seems a bit overwhelming for my needs. I simply want to utilize the same features found in the official Bootstrap documentation, and sveltestrap appears to introduce many differences.
Has anyone encountered similar challenges before? Any insights on resolving this error would be greatly appreciated.