Error in SvelteKIt: Unable to access session due to a function being called outside of

Question

Error in SvelteKIt: Unable to access session due to a function being called outside of

Using Typescript in SvelteKit, I have an .ts file located in the $lib folder.

Attempting to access the user/session from '$app/stores' within the .ts file results in the following code snippet:

import { get } from 'svelte/store';    
import { session } from "$app/stores";

function getUser(){
  const {user} = get(session);
  console.log(user);
}

However, upon calling the function, an error message is displayed in the console:

Uncaught (in promise) Error: Function called outside component initialization

Any suggestions on how to resolve this issue would be greatly appreciated!

Thank you in advance!

typescript svelte sveltekit

Answer 1

Answer №1

If you're wondering when to call the getUser function, it's important to note that it may need to be called at times other than during component initialization in order to avoid errors. This suggests that you should consider structuring your code differently.

According to the documentation:

"...the stores are not free-floating objects: they must be accessed during component initialisation, like anything else that would be accessed with getContext. ...The stores themselves (...) need to be called synchronously on component or page initialisation when $-prefix isn't used. Use getStores to safely .subscribe asynchronously instead."

This means:

Avoid using session directly, and instead use getStores to retrieve it and assign it to session yourself: const { session } = getStores()
Ensure that you call const { session } = getStores() during component initialization.

Here's an example of how this could be implemented:

import { get } from 'svelte/store';    
import { getStores} from "$app/stores";

function getUser() { // <- call this at component initialization
  const { session } = getStores();
 
  return {
    current: () => get(session).user
  }
}

Answer 2

If you're wondering when to call the getUser function, it's important to note that it may need to be called at times other than during component initialization in order to avoid errors. This suggests that you should consider structuring your code differently.

According to the documentation:

"...the stores are not free-floating objects: they must be accessed during component initialisation, like anything else that would be accessed with getContext. ...The stores themselves (...) need to be called synchronously on component or page initialisation when $-prefix isn't used. Use getStores to safely .subscribe asynchronously instead."

This means:

Avoid using session directly, and instead use getStores to retrieve it and assign it to session yourself: const { session } = getStores()
Ensure that you call const { session } = getStores() during component initialization.

Here's an example of how this could be implemented:

import { get } from 'svelte/store';    
import { getStores} from "$app/stores";

function getUser() { // <- call this at component initialization
  const { session } = getStores();
 
  return {
    current: () => get(session).user
  }
}

Error in SvelteKIt: Unable to access session due to a function being called outside of

Answer №1

Similar questions

Looking to retrieve the value of an input element within an ng-select in Angular 6?

Tips for sending an array containing objects with an ID using Angular

In TypeScript, the error "Property does not exist on type 'any[]'" indicates that a specific property is not recognized on

Storing Global Types in Angular: A Better Approach

Issue encountered when trying to bring in a component from a different module

Create a function that recursively maps data across multiple levels

Is it true that after setting the state in the main app with React/Recoil, it cannot be reset within a component?

Encountering an "emit" error while working with PouchDB in Angular 2

Validation parameters provided during the Palantir workshop

Showing a div based on the selection of multiple options from a multiselect

Difficulty fetching data on the frontend with Typescript, React, Vite, and Express

The most effective approach to creating linked observable subscriptions

Unexpected error in React TypeScript: '=' symbol missing. Code error TS1005

The 'AppsList' generic type needs to have one type argument specified.ts(2314)

Using ViewChild in Angular 4 to set focus on dynamically generated textboxes

Retrieve a particular item using the NGXS selector and incorporate it into the template

Converting Mat-Raised-Button into an HTML link for PDF in Angular 6 using Material Design Library

The process of transferring information from a JSON API to TypeScript models

Properly capturing an item within a TypeScript catch statement

Received 2 arguments instead of the expected 1 in the custom validator causing an error (ts 2554)