Not able to generate static site using @sveltejs/adapter-static with bootstrape installed

Question

I created sveltekit app using npm create svelte@latest my-app

Then I installed bootstrap using npm install bootstrap and importing bootstrap css and js in root layout like

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>

Content of svelte.config.js

import adapter from '@sveltejs/adapter-static';

export default {
    kit: {
        adapter: adapter({
            // default options are shown. On some platforms
            // these options are set automatically — see below
            pages: 'build',
            assets: 'build',
            fallback: null,
            precompress: false,
            strict: true
        })
    }
};

npm run dev is working fine

But npm run build is givng me error

ReferenceError: document is not defined
    at K (/home/alok/Alok/myapp/node_modules/bootstrap/dist/js/bootstrap.min.js:6:8846)
    at /home/alok/Alok/myapp/node_modules/bootstrap/dist/js/bootstrap.min.js:6:9655
    at /home/alok/Alok/myapp/node_modules/bootstrap/dist/js/bootstrap.min.js:6:84
    at Object.<anonymous> (/home/alok/Alok/myapp/node_modules/bootstrap/dist/js/bootstrap.min.js:6:256)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)

Node.js v18.12.1
[vite-plugin-sveltekit-compile] Failed with code 1
error during build:
Error: Failed with code 1
    at ChildProcess.<anonymous> (file:///home/alok/Alok/myapp/node_modules/@sveltejs/kit/src/utils/fork.js:67:13)
    at ChildProcess.emit (node:events:513:28)
    at ChildProcess._handle.onexit (node:internal/child_process:291:12)

Is my way of adding bootstrap wrong? How can I build this project to generate static site?

I believe it is trying to prerender the page and imported Bootstrap JavaScript file is not compatible with static/server side rendering. `document` is only available in JavaScript in client side context. — Mikko Ohtamaa, Jan 29 '23 at 10:55

score 0 · Answer 1 · answered Apr 27 '23 at 19:25

document is not defined on server side level, it can't be. What you can do is to import all document using methods in one component and then import that component in your layer as follows:

<script>
...
let Slider;
onMount(async () => {
    const module = await import('./components/Slider.svelte');
    Slider = module.default;
});
...

<svelte:component this={Slider}/>

Imagine my Slider.svelte component has bootstrap imports inside. In that way you're importing your document related component only inside onMount skipping server side completely and not having any errors.

This is right, though bootstrap also needs imported in the onMount step, e.g. ` onMount(async () => { await import('bootstrap'); const module = await import('./components/Slider.svelte'); Slider = module.default;});` Then it works. — JessieinAg, Jun 29 '23 at 03:23

Not able to generate static site using @sveltejs/adapter-static with bootstrape installed

1 Answers1