[Svelte integration] [ReferenceError: document is not defined]

[bartcuijpers]

Describe the bug When following the Svelte integration guide, it results in a not working solution, which seems to be causes by the import; import { Datepicker, Input, initTE } from "tw-elements".

Actual behavior ReferenceError: document is not defined at st (file:///D:/Data/Desktop/skeleton-svelte/node_modules/tw-elements/dist/js/tw-elements.umd.min.js:12:3074) at file:///D:/Data/Desktop/skeleton-svelte/node_modules/tw-elements/dist/js/tw-elements.umd.min.js:16:21014 at file:///D:/Data/Desktop/skeleton-svelte/node_modules/tw-elements/dist/js/tw-elements.umd.min.js:12:178 at file:///D:/Data/Desktop/skeleton-svelte/node_modules/tw-elements/dist/js/tw-elements.umd.min.js:12:192 at ModuleJob.run (node:internal/modules/esm/module_job:192:25) at async DefaultModuleLoader.import (node:internal/modules/esm/loader:228:24) at async nodeImport (file:///D:/Data/Desktop/skeleton-svelte/node_modules/vite/dist/node/chunks/dep-df561101.js:56019:17) at async ssrImport (file:///D:/Data/Desktop/skeleton-svelte/node_modules/vite/dist/node/chunks/dep-df561101.js:55912:24) at async eval (D:/Data/Desktop/skeleton-svelte/src/routes/+page.svelte:5:31) at async instantiateModule (file:///D:/Data/Desktop/skeleton-svelte/node_modules/vite/dist/node/chunks/dep-df561101.js:55974:9)

Desktop

• OS: Win11
• Browser: Chrome
• @sveltejs/kit 1.20.4
• tailwindcss 3.3.3

[bartcuijpers]

Workaround:

<script>
import { onMount } from 'svelte';
onMount(async () => {
    const { Datepicker, Input, initTE } = await import('tw-elements');
    initTE({ Datepicker, Input });
});
</script>

[juujisai]

@bartcuijpers Hi, thanks for letting us know, we'll update the tutorial. Changing to dynamic imports` seems to fix those isssues with other frameworks aswell.

[ignitehub-dev]

onMount(async () => {
    const { Datepicker, Input, initTE } = await import('tw-elements');
    initTE({ Datepicker, Input });
});

This Worked! Thank you.

[miguelgargallo]

eaxctly, and continues

> [email protected] dev
> vite dev



  VITE v4.4.11  ready in 671 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
8:29:14 PM [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "tw-elements"
|- ReferenceError: document is not defined
    at st (file:///D:/gh/learnpostgresql/frontend/node_modules/tw-elements/dist/js/tw-elements.umd.min.js:12:3074)
    at file:///D:/gh/learnpostgresql/frontend/node_modules/tw-elements/dist/js/tw-elements.umd.min.js:16:21014
    at file:///D:/gh/learnpostgresql/frontend/node_modules/tw-elements/dist/js/tw-elements.umd.min.js:12:178
    at file:///D:/gh/learnpostgresql/frontend/node_modules/tw-elements/dist/js/tw-elements.umd.min.js:12:192
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

ReferenceError: document is not defined
    at st (file:///D:/gh/learnpostgresql/frontend/node_modules/tw-elements/dist/js/tw-elements.umd.min.js:12:3074)
    at file:///D:/gh/learnpostgresql/frontend/node_modules/tw-elements/dist/js/tw-elements.umd.min.js:16:21014
    at file:///D:/gh/learnpostgresql/frontend/node_modules/tw-elements/dist/js/tw-elements.umd.min.js:12:178
    at file:///D:/gh/learnpostgresql/frontend/node_modules/tw-elements/dist/js/tw-elements.umd.min.js:12:192
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

[juujisai]

@miguelgargallo Using dynamic imports didn't work? TW-Elements needs to be used client site.

[arjarn]

All is ok for me with import in onMount. But if I refresh page, error "document is not defined" appera again :-/

[juujisai]

@arjarn This error is most likely related to the SSR rendering of the app. TW Elements has components should be rendered on the Client Side because it's using the document and window.

SSR section from the svelte documentation: https://kit.svelte.dev/docs/page-options#ssr

[ktecho]

@arjarn This error is most likely related to the SSR rendering of the app. TW Elements has components should be rendered on the Client Side because it's using the document and window.

SSR section from the svelte documentation: https://kit.svelte.dev/docs/page-options#ssr

If it's using document and window, shouldn't it check if those variables are present?

I updated to v2.0.0, and the problem persists.

[iprzybysz]

Hi @ktecho, check out our updated Svelte Integration tutorial. It may help you with debugging this issue.

[ktecho]

I cannot even import a single component:

import { Carousel, initTWE } from "tw-elements";

Because I get this:

9:30:51 [vite] Error when evaluating SSR module /@fs/home/ktecho/WebstormProjects/plebeian-market/web/shared/src/lib/components/pagebuilder/SectionsProductsSlider.svelte: failed to import "tw-elements"
|- ReferenceError: document is not defined
    at W (file:///home/ktecho/WebstormProjects/plebeian-market/web/shared/node_modules/tw-elements/js/tw-elements.umd.min.js:17:2575)
    at file:///home/ktecho/WebstormProjects/plebeian-market/web/shared/node_modules/tw-elements/js/tw-elements.umd.min.js:17:31375
    at file:///home/ktecho/WebstormProjects/plebeian-market/web/shared/node_modules/tw-elements/js/tw-elements.umd.min.js:1:175
    at file:///home/ktecho/WebstormProjects/plebeian-market/web/shared/node_modules/tw-elements/js/tw-elements.umd.min.js:1:189
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

[iprzybysz]

I cannot even import a single component:

import { Carousel, initTWE } from "tw-elements";

Because I get this:

9:30:51 [vite] Error when evaluating SSR module /@fs/home/ktecho/WebstormProjects/plebeian-market/web/shared/src/lib/components/pagebuilder/SectionsProductsSlider.svelte: failed to import "tw-elements"
|- ReferenceError: document is not defined
    at W (file:///home/ktecho/WebstormProjects/plebeian-market/web/shared/node_modules/tw-elements/js/tw-elements.umd.min.js:17:2575)
    at file:///home/ktecho/WebstormProjects/plebeian-market/web/shared/node_modules/tw-elements/js/tw-elements.umd.min.js:17:31375
    at file:///home/ktecho/WebstormProjects/plebeian-market/web/shared/node_modules/tw-elements/js/tw-elements.umd.min.js:1:175
    at file:///home/ktecho/WebstormProjects/plebeian-market/web/shared/node_modules/tw-elements/js/tw-elements.umd.min.js:1:189
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Consider importing tw-elements package dynamically. By doing it, you can enhance the initialization process, potentially resolving any issues related to component functionality.

onMount(async () => {
  const { Carousel, initTWE } = await import("tw-elements");;
  initTWE({ Carousel });
});