Dexie useLiveQuery hook causes the error "TypeError: dexie.liveQuery is not a function"

Question

Did an npm install of dexie and dexie-react-hooks yesterday. package-lock.json shows dexie 3.0.3 and dexie-react-hooks 1.0.7

Created a react app using the template "cra-template-pwa"

Used the docs on the Dexie site for basic Dexie DB and useLiveQuery and created this simple app component in React.

import React from 'react';
import Dexie from 'dexie'
import { useLiveQuery } from 'dexie-react-hooks'

const myDb = new Dexie('myTable');
myDb.version(1).stores(
  {
    items: "id,name,startDate,endDate"
  }
)

function App() {
  const items = useLiveQuery(myDb.items.orderBy('name'), []);

  const itemViews = items.map(item => { return <div>{item.name}</div> })

  return (
    <div className="App">
      <ul>
        {itemViews}
      </ul>
    </div>
  );
}

export default App;

When this runs in the browser, the app can't display and instead we get this error:

TypeError: dexie.liveQuery is not a function
(anonymous function)
src/dexie-react-hooks.ts:14
  11 | // Make it remember previous subscription's default value when
  12 | // resubscribing (á la useTransition())
  13 | let currentValue = lastResult;
> 14 | const observable = liveQuery(querier);
     | ^  15 | return {
  16 |   getCurrentValue: () => currentValue,
  17 |   subscribe: (onNext, onError) => {

Are we doing something wrong, or is this a bug?

Answer 1

You still need to install dexie@next to use it (as of October 2021). A new stable version of dexie with liveQuery support is coming out soon.

yarn add dexie@next dexie-react-hooks@latest

or

npm i dexie@next dexie-react-hooks@latest