How to import bootstrap 5 javascript plugins into Meteor-Svelte project

user_2564738 0
Viewed 1129

I'm using Meteor-Svelte-Bootstrap combination for a project and I can't make the bootstrap's javascript plugins to work.

I have standard Meteor 1.12.1 + Svelte 3 app structure (very similar to this one), bootstrap 5.0.0-beta1 installed as a node module via meteor npm. I'm importing the bootstrap.scss via @import in my client/main.scss file:

@import "../node_modules/bootstrap/scss/bootstrap.scss";

So far everything works fine. But I can't find the correct way of importing the bootstrap javascript plugins needed for some components (as for instance collapsible navbar).

I tried all the following without success:

  • <script src="..."> in my client/main.html, where as the src attribute I tried all the - node_modules/bootstrap/dist/js/bootstrap*.js files, and the CDN https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js link

  • The same inside <svelte:head> element in my imports/ui/App.svelte component (I'm trying to use the bootstrap javascript directly in this component)

    <svelte:head> 
    <script src="..."></script> 
</svelte:head>

  • import 'bootstrap'; inside the <script> element of my imports/ui/App.svelte component

  • import 'bootstrap'; inside my client/main.js file

  • and probably some more...

None of these works. When I'm trying to import node_modules/bootstrap/dist/js/bootstrap*.js files, I get a syntax error on the first character of the imported file (weird). When I'm using CDN or import bootstrap, no error is shown but the bootstrap javascript doesn't work.

Can someone suggest the correct way of doing this? Thanks.

meteor bootstrap-5 svelte-3
1 Answers

I'm not using Meteor but I am using Svelte 3, Bootstrap 5, Rollup. I was able to get the navbar dropdowns working by using the import. One important part is to make sure that you have the @popperjs/core package installed.

npm i bootstrap @popper/core

Then you need to include the import for bootstrap in a parent component before you're trying to use it. I'm using a page slot that has my navbar component in it, so my page looks like this.

<script>
  import 'bootstrap';
  import '../components/bootstrap-custom.scss';
  import PageSlot from '../components/PageSlot.svelte'
  export let name;
</script>

<style>
</style>

<PageSlot>
  <h1>Hello {name}!</h1>
  <p>Main Svelte-Page</p>
  <button class="btn btn-primary">Button</button>
</PageSlot>

A small disclaimer, this is not a production setup but a proof of concept project so there is probably someone that has a better configuration for this, but this did work. Also should mention that there is a library sveltestrap that wraps the bootstrap components in svelte components.

user_51789000
Related