UnhandledRejection Error

[Rahilkzi]

NextJs

error - UnhandledRejection: Error: No available storage method found.

[codeBelt]

Can you create a codesandbox example so we can see the issue. This way it will be easier for us to troubleshoot.

[Rahilkzi]

Can you create a codesandbox example so we can see the issue. This way it will be easier for us to troubleshoot.

CodeSandBox

https://codesandbox.io/s/upbeat-visvesvaraya-mm052j?file=/pages/store/TodoStore.js

[codeBelt]

@Rahilkzi If you have an app that is Server-side rendering (SSR) you can set the storage value undefined to prevent errors.

const isBrowser = typeof window !== 'undefined';

class TodoStore {
  todos = [];

  constructor() {
    // ...

    makePersistable(this, {
      name: "TodoStore",
      properties: ["todos"],
      storage: isBrowser ? localforage : undefined
    });
  }

Also if you are working with MobX and Next.js make sure you are using enableStaticRendering in your _app.tsx.

import { enableStaticRendering } from 'mobx-react-lite';

const isServer = typeof window === 'undefined'

enableStaticRendering(isServer);

Let me know if that fixes the issue.

[Rahilkzi]

@Rahilkzi If you have an app that is Server-side rendering (SSR) you can set the storage value undefined to prevent errors.

const isBrowser = typeof window !== 'undefined';

class TodoStore {
  todos = [];

  constructor() {
    // ...

    makePersistable(this, {
      name: "TodoStore",
      properties: ["todos"],
      storage: isBrowser ? localforage : undefined
    });
  }

Also if you are working with MobX and Next.js make sure you are using enableStaticRendering in your _app.tsx.

import { enableStaticRendering } from 'mobx-react-lite';

const isServer = typeof window === 'undefined'

enableStaticRendering(isServer);

Let me know if that fixes the issue.

yeah now its working. :)