reactjsnext.jsindexeddbverceldexie

Why does the data output, when deploying to vercel, only work on one page routed with Next.js and at the same time and same prop on another but not?


I have tried...

using React.js from my indexedDb and using Dexie.js as a helper to pass the entries from the _app.js to my details page.

import { v4 as uuidv4 } from "uuid";
import { useLiveQuery } from "dexie-react-hooks";
import { db } from "@/components/Dexie";

const { eventDetails } = db;

export default function App({ Component, pageProps }) {
    
const allItems = useLiveQuery(() => eventDetails.toArray(), []);


    async function handleEntryData(data) {
        try {
            await db.eventDetails.add({
                eventId: uuidv4(),
                title: data.title,
                startTime: data.startTime,
                endTime: data.endTime,
                location: data.location,
                introduce: data.introduce,
                creator: data.creator,
            });
        } catch (error) {
            alert(`Error: ${error}`);
        }
    }

    return (
        <>
            <GlobalStyle />
            <Head>
                
            </Head>
            <main>
                <Component
                    {...pageProps}
                    allItems={allItems}
                    onHandleEntryData={handleEntryData}
                />
            </main>
        </>
    );
}


Details page: This is where the prop is received and passed to a component

import { useRouter } from "next/router";
import DetailsEventData from "@/components/DetailsEventData";
import { optionIcons } from "@/Icons/optionIcon";



function DetailsPage({ allItems }) {
    const router = useRouter();
    const { id } = router.query;
    const currentEvent = allItems?.find(
        (detailsItem) => detailsItem.eventId === id
    );

    
    function handelEdit() {
        router.push(`/editpage/${currentEvent.eventId}`);
    }

    return (
        
                <StyledMain>
                    <StyledBackLink href={`/`}>
                        <Image
                            src={optionIcons[3].imageSrc}
                            alt={optionIcons[3].description}
                            width={40}
                            height={50}
                        />
                    </StyledBackLink>

                    <StyledTitle>Event Details</StyledTitle>
                    <DetailsEventData currentEvent={currentEvent} />

                    <StyledEditImage
                        onClick={handelEdit}
                        src={optionIcons[5].imageSrc}
                        alt={optionIcons[5].description}
                        width={55}
                        height={55}
                    />
                </StyledMain>
        
    );
}


export default DetailsPage;


Component for displaying the data from the database:

import { voteIcons } from "@/Icons/dataIcons";

export default function DetailsEventData({ currentEvent }) {

    return (
        
            <StyledDetailsCard>
                <StyledListItem>
                    {!currentEvent?.voteResult ? (
                        "Are You there?"
                    ) : (
                        <Image
                            src={voteIcons[currentEvent.voteResult].imageSrc}
                            alt={voteIcons[currentEvent.voteResult].description}
                            width={30}
                            height={30}
                        />
                    )}
                </StyledListItem> 
                <StyledListItem>{currentEvent?.title}</StyledListItem>
                <StyledListItem>{currentEvent?.startTime}</StyledListItem>
                <StyledListItem>{currentEvent?.endTime}</StyledListItem>
                <StyledListItem>{currentEvent?.location}</StyledListItem>
                <StyledListItem>{currentEvent?.introduce}</StyledListItem>
                <StyledListItem>{currentEvent?.creator}</StyledListItem>
            </StyledDetailsCard>
    
    );
}


I expect...

on vercel the same behavior as here on the voting page

import { useRouter } from "next/router";
import { useState } from "react";
import VoteDetails from "@/components/VoteDetails";
import { voteIcons } from "@/Icons/dataIcons/";
import { db } from "@/components/Dexie";
import { optionIcons } from "@/Icons/optionIcon";
const { eventDetails } = db;

function Votepage({ allItems }) {
    const [voteCheckmarkImage, setVoteCheckmarkImage] = useState();

    const router = useRouter();
    const { id } = router.query;
    const currentEvent = allItems?.find((voteEvent) => voteEvent.eventId === id);

    function handleVoteResult() {
        const currentVoteIcon = voteIcons.find(
            (voteIcon) => voteIcon.description === voteCheckmarkImage?.props.alt
        );
        eventDetails
            .where("eventId")
            .equals(currentEvent.eventId)
            .modify((voteEvent) => {
                voteEvent.voteResult = currentVoteIcon.id;
            });
    }

    return (
        <>
            <StyledMain>
                <StyledBackLink href="/">
                    <Image
                        src={optionIcons[3].imageSrc}
                        alt={optionIcons[3].description}
                        height={55}
                        width={55}
                    />
                </StyledBackLink>
                <StyledVoteTitle>Voting</StyledVoteTitle>
                <StyledVoteEventCard>
                    <VoteDetails currentEvent={currentEvent} />

                    <StyledEmojiCheckmark>{voteCheckmarkImage}</StyledEmojiCheckmark>
                </StyledVoteEventCard>

                <StyledVoteButtonContainer>
                    {voteIcons.map((voteIcon) => (
                        <StyledVoteButtons
                            key={voteIcon.id}
                            onClick={() =>
                                setVoteCheckmarkImage(
                                    <Image
                                        width={50}
                                        height={50}
                                        src={voteIcon.imageSrc}
                                        alt={voteIcon.description}
                                    />
                                )
                            }
                        >
                            <Image
                                width={80}
                                height={80}
                                src={voteIcon.imageSrc}
                                alt={voteIcon.description}
                            />
                        </StyledVoteButtons>
                    ))}
                </StyledVoteButtonContainer>
                <StyledLogInVoteImage
                    src={optionIcons[2].imageSrc}
                    alt={optionIcons[2].description}
                    width={45}
                    height={45}
                    onClick={handleVoteResult}
                />
            </StyledMain>
        </>
    );
}

export default Votepage;


Here the component gets the same prop as above only that the content on this page is displayed on vercel but not on the other.:

import { Stack } from "@mui/material";
import styled from "styled-components";

export default function VoteDetails({ currentEvent }) {
    return (
        <Stack>
            <StyledVoteCardDetails>
                <StyledListItem>{currentEvent?.title}</StyledListItem>
                <StyledListItem>{currentEvent?.startTime}</StyledListItem>
                <StyledListItem>{currentEvent?.endTime}</StyledListItem>
                <StyledListItem>{currentEvent?.location}</StyledListItem>
                <StyledListItem>{currentEvent?.intoduce}</StyledListItem>
                <StyledListItem>{currentEvent?.creator}</StyledListItem>
            </StyledVoteCardDetails>
        </Stack>
    );
}


currently happening...

while everything works fine on my localhost, i don't get the content about vercel from the database on the details page of my application and it does on the vote page. Although both pages and components draw from the same prop.


Unfortunately there is no error message. Thank you very much in advance for the help


Solution

  • Does it work after deleting database in devtools on the vercel site? If so, maybe the db existed at an earlier version on that origin and you forgot to increment the version number (db.version(n)) when modifying schema?

    Any error can be caught using an ErrorBoundrary in react.