svelte-add

svelte-add copied to clipboard

(INFO: I'm first add scss, later bootstrap.)

# package.json

still they don't Install @popperjs/core

~~# src/app.scss, src/variables.scss~~

~~Should be @import "~bootstrap, because we have configured alias in vite, and VsCode resolve it to node_modules.~~ I don't know what i do on my work vork, but in home it stop works...

# src/app.ts (new file)

import { Dropdown as Dropdown, Offcanvas as Offcanvas } from 'bootstrap'; 

# src/routes/__layout.svelte

<script>
	import '../app.scss';
	import { browser } from '$app/env';
	import { onMount } from 'svelte';

	onMount(async () => {
		if (browser) {
			const firebaseClient = await import('../app');
		}
	});
</script>

<slot />

svelte.config.js

Missing import path from 'node:path';

What is this fixing?

svelte.config.js

Missing import path from 'node:path';

We don't use path there.

With path - it's my fault.

I'm trying to get alias resolve so that ~ points to node_modules. I forgot I copied vite.resolve and blamed you. xD

At the moment, I have a problem with run it in svelte-resolve.

The rest of the part deals with solving the JS import issue needed to run bootstrap, and this one contains references to window and documment.

In the svelte component you cannot use:

import { Dropdown as Dropdown, Offcanvas as Offcanvas } from 'bootstrap'; 

It will cause an error. Of course, you can link bootstrap.js from CDN, but that's not what I expect from svelte-add.

Therefore, I proposed a solution: onMount await import()

We have the option to include Sveltestrap for client-side interactivity based on Bootstrap's styles. Have you tried that and found that it's missing anything such that you need to fall back to regular Bootstrap JS?

Closing because of no response