Error: getFlash options can only be set at the first call to getFlash. about sveltekit-flash-message

[ciscoheat]

This happens when a site has multiple branching routes (like an app route and an admin route), and you browse between them in the same session, so $page refers to the same object. I'll try to come up with a fix for that soon.

[ciscoheat]

Should be fixed now in 2.2.2. If you still get the error, are you using getFlash options on more than one page in the route? (clearOnNavigate is default true, so you can remove that)

[CrlH]

I get a similar issue, still present using [email protected] using the server-side approach as documented.
Note: It does look like this is only thrown when an HTTP error page (4xx, 5xx) is rendered... TBC.

As per your last comment, @ciscoheat, no other options initializer is present.

src/routes/+layout.server.ts

import { loadFlash, flashCookieOptions } from 'sveltekit-flash-message/server';

flashCookieOptions.secure = false;

export const load = loadFlash(() => {});

Stack trace

Error: getFlash options can only be set once, at a top-level component.
    at _initFlash (node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules
/sveltekit-flash-message/dist/client.js:38:15)
    at Module.getFlash (node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_mo
dules/sveltekit-flash-message/dist/client.js:124:12)
    at src/routes/+layout.svelte:8:17
    at Object.$$render (node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16)  
    at .svelte-kit/generated/root.svelte:45:40
    at $$render (node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
    at Object.render (node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:164:17)    
    at Module.render_response (node_modules/.pnpm/@[email protected]_@[email protected]_svelte@4
[email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:171:29)
    at async Module.render_page (node_modules/.pnpm/@[email protected]_@[email protected]_svelte
@[email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:284:10)
    at async resolve (node_modules/.pnpm/@[email protected]_@[email protected][email protected]_vite
@5.0.10/node_modules/@sveltejs/kit/src/runtime/server/respond.js:409:18)
Error: getFlash options can only be set once, at a top-level component.
    at _initFlash (node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules
/sveltekit-flash-message/dist/client.js:38:15)
    at Module.getFlash (node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_mo
dules/sveltekit-flash-message/dist/client.js:124:12)
    at src/routes/+layout.svelte:8:17
    at Object.$$render (node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16)  
    at .svelte-kit/generated/root.svelte:45:40
    at $$render (node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
    at Object.render (node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:164:17)    
    at Module.render_response (node_modules/.pnpm/@[email protected]_@[email protected]_svelte@4
[email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:171:29)
    at async Module.respond_with_error (node_modules/.pnpm/@[email protected]_@[email protected]
[email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/respond_with_error.js:83:10)
    at async Module.render_page (node_modules/.pnpm/@[email protected]_@[email protected]_svelte
@[email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:303:10)
Error: getFlash options can only be set once, at a top-level component.
    at _initFlash (node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules
/sveltekit-flash-message/dist/client.js:38:15)
    at Module.getFlash (node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_mo
dules/sveltekit-flash-message/dist/client.js:124:12)
    at src/routes/+layout.svelte:8:17
    at Object.$$render (node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16)  
    at .svelte-kit/generated/root.svelte:45:40
    at $$render (node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
    at Object.render (node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:164:17)    
    at Module.render_response (node_modules/.pnpm/@[email protected]_@[email protected]_svelte@4
[email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:171:29)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Module.render_page (node_modules/.pnpm/@[email protected]_@[email protected]_svelte
@[email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:284:10)
Error: getFlash options can only be set once, at a top-level component.
    at _initFlash (node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules
/sveltekit-flash-message/dist/client.js:38:15)
    at Module.getFlash (node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_mo
dules/sveltekit-flash-message/dist/client.js:124:12)
    at src/routes/+layout.svelte:8:17
    at Object.$$render (node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16)  
    at .svelte-kit/generated/root.svelte:45:40
    at $$render (node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
    at Object.render (node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:164:17)    
    at Module.render_response (node_modules/.pnpm/@[email protected]_@[email protected]_svelte@4
[email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:171:29)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Module.respond_with_error (node_modules/.pnpm/@[email protected]_@[email protected]
[email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/respond_with_error.js:83:10)

[ciscoheat]

@CrlH Are you setting the getFlash options in another layout, or none at all? If you can reproduce this in a repo, that'd be much appreciated.

[CrlH]

Aha - my bad: while preparing a repo, I did find a getFlash that sets clearAfterMs, like this:

<script lang="ts">
  import { getFlash } from 'sveltekit-flash-message/client';
  import { page } from '$app/stores';

  const flash = getFlash(page, {
    clearAfterMs: 10000,
  });
</script>

For me it made sense to set flashCookieOptions server-side, but this appears to be the only option you can set server-side... Meaning this behavior prevents you from setting other options on the client side, right? 😕

Might be good to add a(nother) note to the docs, or to consider other options on server side too... Though I'd have to admit that things like clearAfterMs make a lot less sense server-side. 🤓

[ciscoheat]

The only common option for server and client are the cookies. Maybe there can be a similar cookie option for the client as on the server, to separate them from the other options.

[CrlH]

Thanks! I’ll change my app to have flashCookieOptions to be handled on client-site.

But it looks like one that sets flashCookieOptions server-side can’t set other options… That’s limiting, no?

[ciscoheat]

What other options on the server are there?