reactjs - React and dexie: "Invalid hook call" error in functional component

Question

I'm getting the following error when using the useLiveQuery hook from dexie with react. Don't understand, none of the three cases below apply.

The error:

application.78bb5802.js:58032 Uncaught Error: Invalid hook call. Hooks can only be called inside of the >body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

The component (Editor.js):

import React, { useState}  from "react";
import Title from './Title'
import Blocks from './Blocks'
import styled from 'styled-components'
import { useLiveQuery } from "dexie-react-hooks";
import db from '../db'

const Editor = () => {
    const [title, setTitle] = useState('');
    console.log("Editor: start - title state: " + title);

    const tag = useLiveQuery(
        () =>
          title
            ? db.tags.where('name').equals(title)
            : db.tags.toCollection().first(),
        [title]
    );
       
    if(!tag) {
        console.log("tag not loaded yet, returning null");
        return null;
    }

    const onTitleChange = (event) => {
        db.tags.where({ name: title }).modify((item) => item.name=event.target.value)
    }
     
    const EditorStyle = styled.section`
        padding: 10px;
        min-width: 400px;
    `;
    console.log("Rendering with title:" + title + " and tag.name: " + tag.name);
    return (
        <EditorStyle>
            <Title 
                onTitleChange={onTitleChange}
                title={tag?.name}
            />
            <Blocks 
                tag={tag?.name}
            />
        </EditorStyle>
    )
}

export default Editor;

The database (db.js)

db.version(1).stores({ tags: &name, *tags, blocks: tag, content });

The db is prepopulated with one value

db.tags.add({name: "First page"});

Using react 17.0.1.

What am I doing wrong?

Thanks!

question from:https://stackoverflow.com/questions/65647432/react-and-dexie-invalid-hook-call-error-in-functional-component

Answer 1

You need dexie@>3.1.0-alpha.5 right now to use dexie-react-hooks.