Dexie/localStorage not working at all

Hello,

Currently I'm migrating my Next.JS application to Tanstack Start.

I use Dexie and localStorage very heavily and it isn't really working as expected. Dexie and localstorage reads are coming back as undefined.

Here is an example component where it isn't working...

import {useEffect} from "react";
import {TriPOS} from "redacted";
import {useLiveQuery} from "dexie-react-hooks";
import {db} from "../../dexie-utils/db";
import {useToast} from "../../hooks/useToast";

export default function TriPOSHelper() {

    const { showToast } = useToast();

    const restaurant = useLiveQuery(async ()=>{
        return db.restaurant.get(1);
    })

    const station = useLiveQuery(async ()=>{
        return db.station.get(1);
    })

    useEffect(()=>{
        if(restaurant && station) {
            TriPOS.initialize({
                terminalId: "123",
                accountToken: restaurant.fis_acct_token,
                accountId: restaurant.fis_acct_id,
                acceptorId: restaurant.fis_acceptor_id,
                bluetoothIdentifier: station.terminal_device_id,
            })
                .then(()=>{
                    showToast({
                        message: "TriPOS Initialized Successfully!",
                        type: "success",
                    })
                })
                .catch(()=>{
                    showToast({
                        message: "TriPOS Initialization Error",
                        type: "error",
                    })
                })
        }
    },[restaurant, station])

    return null
}

import {useEffect} from "react";
import {TriPOS} from "redacted";
import {useLiveQuery} from "dexie-react-hooks";
import {db} from "../../dexie-utils/db";
import {useToast} from "../../hooks/useToast";

export default function TriPOSHelper() {

    const { showToast } = useToast();

    const restaurant = useLiveQuery(async ()=>{
        return db.restaurant.get(1);
    })

    const station = useLiveQuery(async ()=>{
        return db.station.get(1);
    })

    useEffect(()=>{
        if(restaurant && station) {
            TriPOS.initialize({
                terminalId: "123",
                accountToken: restaurant.fis_acct_token,
                accountId: restaurant.fis_acct_id,
                acceptorId: restaurant.fis_acceptor_id,
                bluetoothIdentifier: station.terminal_device_id,
            })
                .then(()=>{
                    showToast({
                        message: "TriPOS Initialized Successfully!",
                        type: "success",
                    })
                })
                .catch(()=>{
                    showToast({
                        message: "TriPOS Initialization Error",
                        type: "error",
                    })
                })
        }
    },[restaurant, station])

    return null
}

import {useEffect} from "react";
import {TriPOS} from "redacted";
import {useLiveQuery} from "dexie-react-hooks";
import {db} from "../../dexie-utils/db";
import {useToast} from "../../hooks/useToast";

export default function TriPOSHelper() {

    const { showToast } = useToast();

    const restaurant = useLiveQuery(async ()=>{
        return db.restaurant.get(1);
    })

    const station = useLiveQuery(async ()=>{
        return db.station.get(1);
    })

    useEffect(()=>{
        if(restaurant && station) {
            TriPOS.initialize({
                terminalId: "123",
                accountToken: restaurant.fis_acct_token,
                accountId: restaurant.fis_acct_id,
                acceptorId: restaurant.fis_acceptor_id,
                bluetoothIdentifier: station.terminal_device_id,
            })
                .then(()=>{
                    showToast({
                        message: "TriPOS Initialized Successfully!",
                        type: "success",
                    })
                })
                .catch(()=>{
                    showToast({
                        message: "TriPOS Initialization Error",
                        type: "error",
                    })
                })
        }
    },[restaurant, station])

    return null
}

import {useEffect} from "react";
import {TriPOS} from "redacted";
import {useLiveQuery} from "dexie-react-hooks";
import {db} from "../../dexie-utils/db";
import {useToast} from "../../hooks/useToast";

export default function TriPOSHelper() {

    const { showToast } = useToast();

    const restaurant = useLiveQuery(async ()=>{
        return db.restaurant.get(1);
    })

    const station = useLiveQuery(async ()=>{
        return db.station.get(1);
    })

    useEffect(()=>{
        if(restaurant && station) {
            TriPOS.initialize({
                terminalId: "123",
                accountToken: restaurant.fis_acct_token,
                accountId: restaurant.fis_acct_id,
                acceptorId: restaurant.fis_acceptor_id,
                bluetoothIdentifier: station.terminal_device_id,
            })
                .then(()=>{
                    showToast({
                        message: "TriPOS Initialized Successfully!",
                        type: "success",
                    })
                })
                .catch(()=>{
                    showToast({
                        message: "TriPOS Initialization Error",
                        type: "error",
                    })
                })
        }
    },[restaurant, station])

    return null
}

This is a helper function/component to initialize a payment device -- really the logic is not what I'm concerned about, but it is not actually reading any data (even though it exists in the local dexie database)

This component is rendered in the

__root.tsx

__root.tsx

file

I do have SPA mode on.

Dexie/localStorage not working at all

Similar Threads

Similar Threads

Similar Threads