I started my project with SvelteKit by running npm create svelte@latest my-app
Afterwards, I included Bootstrap in the project using npm install bootstrap. Then I imported Bootstrap's css and js files into the root layout as shown below:
The content of src/routes/+layout.svelte
<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import Header from './Header.svelte';
import './styles.css';
</script>
<div class="app">
<Header />
<main>
<slot />
</main>
<footer>
<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
</footer>
</div>
<style>
</style>
The configuration in svelte.config.js
import adapter from '@sveltejs/adapter-static';
export default {
kit: {
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: null,
precompress: false,
strict: true
})
}
};
npm run dev is working fine, but when I try to run npm run build, I encounter an error:
ReferenceError: document is not defined
at K (/home/alok/Alok/myapp/node_modules/bootstrap/dist/js/bootstrap.min.js:6:8846)
(...)
[vite-plugin-sveltekit-compile] Failed with code 1
error during build:
Error: Failed with code 1
(...)Am I adding Bootstrap incorrectly? How can I successfully build this project to generate a static site?