evoluhq / evolu

A local-first platform designed for privacy, ease of use, and no vendor lock-in
https://evolu.dev
MIT License
1.35k stars 51 forks source link

createContext is not a function (EvoluProvider in NextJS) #491

Closed tanlucvn closed 21 hours ago

tanlucvn commented 1 day ago

I cant put EvoluProvider in layout for NextJS project (app/layout.tsx)

import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"

import "./globals.css"

import { evolu } from "@/services/evolu/client"

import { cn } from "@/lib/utils"
import { ThemeProvider } from "@/components/theme-provider"
import { EvoluProvider } from "@evolu/react"

const fontSans = GeistSans

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={cn("font-sans antialiased", fontSans.variable)}
        suppressHydrationWarning
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <EvoluProvider evolu={evolu}>{children}</EvoluProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}

client.ts

import * as S from "@effect/schema/Schema"
import { createEvolu, createIndexes, NonEmptyString1000 } from "@evolu/react"

import { Database } from "./database"
import { NonEmptyString50 } from "./schema"

const indexes = createIndexes((create) => [
  create("indexTodoCreatedAt").on("todo").column("createdAt"),
  create("indexTodoCategoryCreatedAt").on("todoCategory").column("createdAt"),
])

export const evolu = createEvolu(Database, {
  indexes,
  initialData: (evolu) => {
    const { id: categoryId } = evolu.create("todoCategory", {
      name: S.decodeSync(NonEmptyString50)("Not Urgent"),
    })
    evolu.create("todo", {
      title: S.decodeSync(NonEmptyString1000)("Try React Suspense"),
      categoryId,
    })
  },
})

When i run the project in dev environment i get this error Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

It only works when each component contains EvoluProvider.

steida commented 21 hours ago

Probably "use client" or something like that. Here is Evolu running in Next.js App Router: https://github.com/evoluhq/evolu/tree/main/apps/web/app

We recommend staying with Next.js Pages Router until App Router is fixed for SPA.