fixes to support hypergraph in nextjs (fix imports, use automerge slim)

README.md

@@ -30,6 +30,15 @@ cd apps/server
 pnpm prisma migrate dev # this will also generate the Prisma client
 ```
 
+You can run the next example app with:
+
+```sh
+# Notes:
+# - You need to build the packages first and every time you make changes to the packages
+cd apps/next-example
+pnpm dev
+```
+
 ## Upgrading Dependencies
 
 ```sh

apps/events/package.json

@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "@automerge/automerge": "^2.2.9",
-    "@automerge/automerge-repo": "^2.0.0-beta.2",
-    "@automerge/automerge-repo-react-hooks": "^2.0.0-beta.2",
+    "@automerge/automerge-repo": "=2.0.0-beta.5",
+    "@automerge/automerge-repo-react-hooks": "=2.0.0-beta.5",
     "@graphprotocol/grc-20": "^0.11.5",
     "@graphprotocol/hypergraph": "workspace:*",
     "@graphprotocol/hypergraph-react": "workspace:*",
@@ -51,8 +51,6 @@
     "@vitejs/plugin-react": "^4.4.1",
     "globals": "^16.1.0",
     "tailwindcss": "^4.1.5",
-    "vite-plugin-node-polyfills": "^0.23.0",
-    "vite-plugin-top-level-await": "^1.5.0",
-    "vite-plugin-wasm": "^3.4.1"
+    "vite-plugin-node-polyfills": "^0.23.0"
   }
 }

apps/events/vite.config.ts

@@ -4,14 +4,10 @@ import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
-import topLevelAwait from 'vite-plugin-top-level-await';
-import wasm from 'vite-plugin-wasm';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    wasm(),
-    topLevelAwait(),
     TanStackRouterVite(),
     react(),
     nodePolyfills({

apps/next-example/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/next-example/next.config.ts

@@ -0,0 +1,13 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  // turbopack: {
+  //   root: path.join(__dirname, '../..'),
+  //   resolveAlias: {
+  //     '@graphprotocol/hypergraph': path.resolve(__dirname, '../../packages/hypergraph'),
+  //     '@graphprotocol/hypergraph-react': path.resolve(__dirname, '../../packages/hypergraph-react'),
+  //   },
+  // },
+};
+
+export default nextConfig;

apps/next-example/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "next-example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "type": "module",
+  "dependencies": {
+    "@graphprotocol/grc-20": "^0.11.5",
+    "@graphprotocol/hypergraph": "workspace:*",
+    "@graphprotocol/hypergraph-react": "workspace:*",
+    "@privy-io/react-auth": "^2.13.0",
+    "next": "15.3.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5"
+  }
+}

apps/next-example/src/app/globals.css

@@ -0,0 +1,42 @@
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

apps/next-example/src/app/layout.tsx

@@ -0,0 +1,33 @@
+import Providers from '@/components/providers';
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

apps/next-example/src/app/page.module.css

@@ -0,0 +1,35 @@
+.page {
+  --gray-rgb: 0, 0, 0;
+  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
+  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
+
+  --button-primary-hover: #383838;
+  --button-secondary-hover: #f2f2f2;
+
+  display: grid;
+  grid-template-rows: 20px 1fr 20px;
+  align-items: center;
+  justify-items: center;
+  min-height: 100svh;
+  padding: 80px;
+  gap: 64px;
+  font-family: var(--font-geist-sans);
+}
+
+@media (prefers-color-scheme: dark) {
+  .page {
+    --gray-rgb: 255, 255, 255;
+    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+
+    --button-primary-hover: #ccc;
+    --button-secondary-hover: #1a1a1a;
+  }
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  grid-row-start: 2;
+}

apps/next-example/src/app/page.tsx

@@ -0,0 +1,11 @@
+import { Test } from '../components/test';
+import styles from './page.module.css';
+export default function Home() {
+  return (
+    <div className={styles.page}>
+      <main className={styles.main}>
+        <Test />
+      </main>
+    </div>
+  );
+}

apps/next-example/src/components/providers.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { HypergraphAppProvider } from '@graphprotocol/hypergraph-react';
+import { PrivyProvider } from '@privy-io/react-auth';
+
+// recommended by https://docs.privy.io/basics/troubleshooting/react-frameworks#next-js
+export default function Providers({ children }: { children: React.ReactNode }) {
+  const storage = typeof window !== 'undefined' ? window.localStorage : (undefined as unknown as Storage);
+
+  return (
+    <PrivyProvider
+      appId="cm4wx6ziv00ngrmfjf9ik36iu"
+      config={{
+        // Display email and wallet as login methods
+        loginMethods: ['email', 'wallet', 'google', 'twitter', 'github'],
+        // Customize Privy's appearance in your app
+        appearance: {
+          theme: 'light',
+          accentColor: '#676FFF',
+        },
+        // Create embedded wallets for users who don't have a wallet
+        embeddedWallets: {
+          createOnLogin: 'users-without-wallets',
+        },
+      }}
+    >
+      <HypergraphAppProvider storage={storage}>{children}</HypergraphAppProvider>
+    </PrivyProvider>
+  );
+}

apps/next-example/src/components/test.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+export const Test = () => {
+  return <h1>Hello World</h1>;
+};

apps/next-example/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"],
+      // "@graphprotocol/hypergraph": ["../../packages/hypergraph/src"],
+      // "@graphprotocol/hypergraph-react": ["../../packages/hypergraph-react/src"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

packages/hypergraph-react/package.json

@@ -39,8 +39,8 @@
   },
   "dependencies": {
     "@automerge/automerge": "^2.2.9",
-    "@automerge/automerge-repo": "^2.0.0-beta.2",
-    "@automerge/automerge-repo-react-hooks": "^2.0.0-beta.2",
+    "@automerge/automerge-repo": "=2.0.0-beta.5",
+    "@automerge/automerge-repo-react-hooks": "=2.0.0-beta.5",
     "@graphprotocol/grc-20": "^0.11.5",
     "@noble/hashes": "^1.8.0",
     "@tanstack/react-query": "^5.75.5",

packages/hypergraph-react/src/HypergraphAppContext.tsx

@@ -1,9 +1,12 @@
 'use client';
 
-import * as automerge from '@automerge/automerge';
-import { uuid } from '@automerge/automerge';
 import type { DocHandle } from '@automerge/automerge-repo';
 import { RepoContext } from '@automerge/automerge-repo-react-hooks';
+import { Repo } from '@automerge/automerge-repo/slim';
+// @ts-expect-error not properly typed and exported in the automerge package
+import { automergeWasmBase64 } from '@automerge/automerge/automerge.wasm.base64.js';
+import * as automerge from '@automerge/automerge/slim';
+import { uuid } from '@automerge/automerge/slim';
 import { type GeoSmartAccount, Graph } from '@graphprotocol/grc-20';
 import {
   Identity,
@@ -1383,6 +1386,20 @@ export function HypergraphAppProvider({
     [createSpaceInboxForContext],
   );
 
+  useEffect(() => {
+    const setupRepo = async () => {
+      await automerge.next.initializeBase64Wasm(automergeWasmBase64);
+      const newRepo = new Repo({});
+      store.send({ type: 'setRepo', repo: newRepo });
+    };
+    setupRepo();
+  }, []);
+
+  // need to wait until Automerge is initialized before we can continue to any component that might need it
+  if (repo === null) {
+    return null;
+  }
+
   return (
     <HypergraphAppContext.Provider
       value={{

packages/hypergraph-react/src/HypergraphSpaceContext.tsx

@@ -40,13 +40,13 @@ export function HypergraphSpaceProvider({
   let current = ref.current;
   if (current === undefined || space !== current.space || repo !== current.repo) {
     const id = Utils.idToAutomergeId(space) as AnyDocumentId;
-    const handle = repo.find<Entity.DocumentContent>(id);
+    const result = repo.findWithProgress<Entity.DocumentContent>(id);
 
     current = ref.current = {
       space,
       repo,
       id,
-      handle,
+      handle: result.handle,
       mapping,
     };
   }