dexie-react-hooks + next.js: require() of ES Module C:\...\dexie.mjs not supported.

[neelkarma]

I get this error that originates from the dexie-react-hooks package whenever I try to import it in my Next.js 12 app:

Error: require() of ES Module C:\Users\nsdjs\Documents\Programming\websites\ramble\node_modules\dexie\dist\modern\dexie.mjs not supported.
Instead change the require of C:\Users\nsdjs\Documents\Programming\websites\ramble\node_modules\dexie\dist\modern\dexie.mjs to a dynamic import() which is available in all CommonJS modules.

Call Stack:
<unknown>
file:///C:/Users/nsdjs/Documents/Programming/websites/ramble/node_modules/dexie-react-hooks/dist/dexie-react-hooks.js (2:85)
Object.<anonymous>
file:///C:/Users/nsdjs/Documents/Programming/websites/ramble/node_modules/dexie-react-hooks/dist/dexie-react-hooks.js (5:2)
Object.dexie-react-hooks
file:///C:/Users/nsdjs/Documents/Programming/websites/ramble/.next/server/pages/index.js (52:18)
__webpack_require__

and so on...

Here's the code sample that triggered this:

import { useLiveQuery } from "dexie-react-hooks";
import type { NextPage } from "next";
import { useState } from "react";
import { Layout } from "../components/layout";
import { db } from "../lib/db";

const Home: NextPage = () => {
  const [content, setContent] = useState("");
  const rambles = useLiveQuery(() => db.rambles.toArray());

  const addRamble = async () => {
    await db.rambles.add({ content, dateCreated: new Date() });
  };

  return (
    <Layout>
      <textarea onChange={(e) => setContent(e.target.value)} />
      <button onClick={addRamble}>Add Ramble</button>
      <hr />
      <ul>
        {rambles?.map(({ id, content, dateCreated }) => (
          <li key={id}>
            {content}, {dateCreated}
          </li>
        ))}
      </ul>
    </Layout>
  );
};

export default Home;

Any ideas how to fix this? I'm using the latest versions of both dexie and dexie-react-hooks.

[phut-tran]

I've got the same error here. Upgrade Dexie to v3.2.1-beta.2 solves my problem. Read this issue #1439.

[neelkarma]

Sorry for the late reply, but updating to v3.2.1-beta.2 solved the problem for me too. Thanks

[dfahlander]

Note: The latest version of dexie-react-hooks (version 1.1.3) gives better nextjs support - no need to dynamically import components or check for SSR within your queries - just use the vanilla react samples and import components normally.