T
TanStack•6mo ago
foreign-sapphire

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
foreign-sapphire
foreign-sapphireOP•6mo ago
Same with localstorage reads btw any ideas? thanks in advance!
absent-sapphire
absent-sapphire•6mo ago
what do you mean by SPA mode here?
foreign-sapphire
foreign-sapphireOP•6mo 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']}
})
absent-sapphire
absent-sapphire•6mo ago
I assume this issue is in dev?
foreign-sapphire
foreign-sapphireOP•6mo 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
absent-sapphire
absent-sapphire•6mo 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
foreign-sapphire
foreign-sapphireOP•6mo ago
okay gotcha, so i should turn SPA mode off and turn SSR off for each route?
absent-sapphire
absent-sapphire•6mo 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
foreign-sapphire
foreign-sapphireOP•6mo 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
absent-sapphire
absent-sapphire•6mo ago
inside createFileRoute add ssr:false
foreign-sapphire
foreign-sapphireOP•6mo ago
ahhh okay thats what i did
absent-sapphire
absent-sapphire•6mo ago
or defaultSsr in createRouter
foreign-sapphire
foreign-sapphireOP•6mo 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
absent-sapphire
absent-sapphire•6mo ago
if you have a reproducer project that you can share I can have a look later
foreign-sapphire
foreign-sapphireOP•6mo 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
absent-sapphire
absent-sapphire•6mo ago
yeah but where do you try to read from local storage? in the react component?
foreign-sapphire
foreign-sapphireOP•6mo ago
in a route with ssr: false
absent-sapphire
absent-sapphire•6mo ago
and where in the route? loader or beforeLoad ?
foreign-sapphire
foreign-sapphireOP•6mo ago
in the body of the route..? maybe the mistake is mine and i am mis-using tanstack router will read docs
absent-sapphire
absent-sapphire•6mo ago
what's the body of a route ? just paste the code 🙂
foreign-sapphire
foreign-sapphireOP•6mo 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 />
}
absent-sapphire
absent-sapphire•6mo ago
this should work, the logs should appear in the browser logs are there any errors?
foreign-sapphire
foreign-sapphireOP•6mo 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>) ```
absent-sapphire
absent-sapphire•6mo 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>
        </>
    )
}

Did you find this page helpful?