useLiveQuery - MissingAPIError: IndexedDB API missing.

[jMoulis]

Hello,
I'm using useLiveQuery and everytime I refresh the page I have this error MissingAPIError: IndexedDB API missing. Please visit https://tinyurl.com/y2uuvskb

export const Tracks = () => {
  const tracks = useLiveQuery(() => db.tracks.toArray());
  return (
      <List>
        {loading === 'FALSE' && tracks?.length
          ? tracks?.map((travel, key) => (
              <TrackItem track={travel} key={key}  />
            ))
          : null}
      </List>
  );
};

nextjs: 12.0.7
react: 17.0.2
dexie: ^3.2.1-beta.2
dexie-react-hooks: ^1.1.1

What do I do wrong?

[dfahlander]

That error happens in node where indexeddb is not available. I assume the code executes in server side rendering in nextjs. Can you instruct nextjs to not render that part server side?

[jMoulis]

Thanks for replying. I tried different approach but none worked so I made a kind of listener based on service worker onmessage, sorry I’m too new to nextjs. But thank you so much for you work

[davigmacode]

Same problem, this is how i resolve, disable ssr at page level

import dynamic from "next/dynamic"

export const Page: FC = () => {
  return (
    <Tracks/>
  )
}

const Tracks = () => {
  const tracks = useLiveQuery(() => db.tracks.toArray());
  return (
      <List>
        {loading === 'FALSE' && tracks?.length
          ? tracks?.map((travel, key) => (
              <TrackItem track={travel} key={key}  />
            ))
          : null}
      </List>
  );
};

export default dynamic(() => Promise.resolve(Page), { ssr: false });

[dfahlander]

Upgrade dexie-react-hooks to latest and everything should just work without having to use dynamic import.

(fixed in #1675)