correct-apricot

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
}

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 file I do have SPA mode on.

24 Replies

correct-apricotOP•3mo ago

Same with localstorage reads btw any ideas? thanks in advance!

fair-rose•3mo ago

what do you mean by SPA mode here?

correct-apricotOP•3mo ago

inside of vite config i have SPA mode set to true

import tailwindcss from '@tailwindcss/vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
    server: {
        port: 3000,
    },
    plugins: [
        tailwindcss(),
        tsconfigPaths(),
        tanstackStart({
            tsr: {
                routesDirectory: 'src/app', // Defaults to "src/routes"
            },
            spa: {
                enabled: true,
            },
        }),
    ],
    ssr: {noExternal: ['@fluentui/react-icons']}
})

import tailwindcss from '@tailwindcss/vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
    server: {
        port: 3000,
    },
    plugins: [
        tailwindcss(),
        tsconfigPaths(),
        tanstackStart({
            tsr: {
                routesDirectory: 'src/app', // Defaults to "src/routes"
            },
            spa: {
                enabled: true,
            },
        }),
    ],
    ssr: {noExternal: ['@fluentui/react-icons']}
})

fair-rose•3mo ago

I assume this issue is in dev?

correct-apricotOP•3mo ago

yes i dont know for prod yet sorry to bother you, but any ideas? ive been messing with it and cant get anything to work dexie or localstorage related

fair-rose•3mo ago

i think spa mode is not properly supported in dev right now. however, you can set ssr: false in a route config and then it will not SSR that particular route this will right now still run beforeLoad and loaders on the server, but i am working on that right now

correct-apricotOP•3mo ago

okay gotcha, so i should turn SPA mode off and turn SSR off for each route?

fair-rose•3mo ago

defaultSsr: false should do the trick however, right now this means the root route will still be SSRed i am on this as well there are some small things I still need to implement, but this should be ready soon

correct-apricotOP•2mo ago

awesome thank you so much i'll try it out and keep you posted 🙂 i cant seem to find this configuration option ive scoured the docs and searched everywhere

fair-rose•2mo ago

inside createFileRoute add ssr:false

correct-apricotOP•2mo ago

ahhh okay thats what i did

fair-rose•2mo ago

or defaultSsr in createRouter

correct-apricotOP•2mo ago

yeah its still not doing anything from localStorage or from dexie im looking into it now and seeing if there is anything on my side but i cant even get a basic localStorage.getItem("key") to print in console

fair-rose•2mo ago

if you have a reproducer project that you can share I can have a look later

correct-apricotOP•2mo ago

okay, im also trying to figure it out on my end ultimately its really too bad, this migration has taken like 2 weeks 😦 i know the library is still in beta realistically if you want to pull up my reproducer project from earlier and just try to pull from local storage in any route

fair-rose•2mo ago

yeah but where do you try to read from local storage? in the react component?

correct-apricotOP•2mo ago

in a route with ssr: false

fair-rose•2mo ago

and where in the route? loader or beforeLoad ?

correct-apricotOP•2mo ago

in the body of the route..? maybe the mistake is mine and i am mis-using tanstack router will read docs

fair-rose•2mo ago

what's the body of a route ? just paste the code 🙂

correct-apricotOP•2mo ago

ahhh yes the weakness of anyone seeking help in a coding forum sending code!!!

import {createFileRoute, redirect} from "@tanstack/react-router";
import LoginPinPad from "../../components/PinPads/LoginPinPad";

export const Route = createFileRoute('/')({
    component: Home,
    ssr: false,
})

function Home() {
    console.log("home page running") <-- body of the route?
    console.log(localStorage.getItem("restaurantId")) <-- not console logging
    return <LoginPinPad />
}

import {createFileRoute, redirect} from "@tanstack/react-router";
import LoginPinPad from "../../components/PinPads/LoginPinPad";

export const Route = createFileRoute('/')({
    component: Home,
    ssr: false,
})

function Home() {
    console.log("home page running") <-- body of the route?
    console.log(localStorage.getItem("restaurantId")) <-- not console logging
    return <LoginPinPad />
}

fair-rose•2mo ago

this should work, the logs should appear in the browser logs are there any errors?

correct-apricotOP•2mo ago

no i see the following logs

[Info] Injected From Server: (localhost, line 24)
__TSR_SSR__.initMatch({"id":"__root__","__beforeLoadContext":"{}","loaderData":"{\"$undefined\":0}","error":"{\"$undefined\":0}","extracted":null,"updatedAt":1751309280981,"status":"success"})
[Info] Injected From Server: (localhost, line 25)
__TSR_SSR__.initMatch({"id":"/","__beforeLoadContext":"{}","loaderData":"{\"$undefined\":0}","error":"{\"$undefined\":0}","extracted":null,"updatedAt":1751309280981,"status":"success"})
[Info] Injected From Server: (localhost, line 26)
__TSR_SSR__.dehydrated = "{\"manifest\":{\"routes\":{\"__root__\":{\"preloads\":{\"$undefined\":0},\"assets\":[{\"tag\":\"script\",\"attrs\":{\"type\":\"module\",\"suppressHydrationWarning\":true,\"async\":true},\"children\":\"import { injectIntoGlobalHook } from \\\"/@react-refresh\\\";\\ninjectIntoGlobalHook(window);\\nwindow.$RefreshReg$ = () => {};\\nwindow.$RefreshSig$ = () => (type) => type;;;import('/~start/default-client-entry')\"}]}},\"clientEntry\":\"/~start/default-client-entry\"},\"dehydratedData\":{\"$undefined\":0},\"lastMatchId\":\"/\"}"

[Info] Injected From Server: (localhost, line 24)
__TSR_SSR__.initMatch({"id":"__root__","__beforeLoadContext":"{}","loaderData":"{\"$undefined\":0}","error":"{\"$undefined\":0}","extracted":null,"updatedAt":1751309280981,"status":"success"})
[Info] Injected From Server: (localhost, line 25)
__TSR_SSR__.initMatch({"id":"/","__beforeLoadContext":"{}","loaderData":"{\"$undefined\":0}","error":"{\"$undefined\":0}","extracted":null,"updatedAt":1751309280981,"status":"success"})
[Info] Injected From Server: (localhost, line 26)
__TSR_SSR__.dehydrated = "{\"manifest\":{\"routes\":{\"__root__\":{\"preloads\":{\"$undefined\":0},\"assets\":[{\"tag\":\"script\",\"attrs\":{\"type\":\"module\",\"suppressHydrationWarning\":true,\"async\":true},\"children\":\"import { injectIntoGlobalHook } from \\\"/@react-refresh\\\";\\ninjectIntoGlobalHook(window);\\nwindow.$RefreshReg$ = () => {};\\nwindow.$RefreshSig$ = () => (type) => type;;;import('/~start/default-client-entry')\"}]}},\"clientEntry\":\"/~start/default-client-entry\"},\"dehydratedData\":{\"$undefined\":0},\"lastMatchId\":\"/\"}"

there are no other logs i do see this in the server logs, coming from root: ``` Warning: A notFoundError was encountered on the route with ID "root__", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<div>Not Found<div>) ```

fair-rose•2mo ago

it works for me in your project

import {createFileRoute} from "@tanstack/react-router";

export const Route = createFileRoute('/')({
component: Home,
ssr:false
})

function Home() {
    localStorage.setItem('data', 'foo-bar');
    const data = localStorage.getItem('data');
    console.log(data);
    return (
        <>
            <h1>Test</h1>
        </>
    )
}

import {createFileRoute} from "@tanstack/react-router";

export const Route = createFileRoute('/')({
component: Home,
ssr:false
})

function Home() {
    localStorage.setItem('data', 'foo-bar');
    const data = localStorage.getItem('data');
    console.log(data);
    return (
        <>
            <h1>Test</h1>
        </>
    )
}

Gaming

Programming

Dexie/localStorage not working at all

Did you find this page helpful?