"createContext only works in Client Components" error in API routes

[simonknittel]

Describe the bug

Next.js complains about using createContext inside a server component while I'm trying to use this library inside a Next.js 13 Route Handler.

Steps to reproduce the bug

1. Install @unleash/nextjs@0.1.2
2. Create Next.js 13 API Route Handler:

// src/app/api/my-route.ts

import { evaluateFlags, flagsClient, getDefinitions } from "@unleash/nextjs";
import { getServerSession } from "next-auth";

export async function POST() {
  try {
    const session = await getServerSession(authOptions);
    if (!session) throw new Error("Unauthorized");

    // ...

    const definitions = await getDefinitions();
    const { toggles } = evaluateFlags(definitions, {
      userId: session.user.id,
    });
    const flags = flagsClient(toggles);

    if (flags.isEnabled("MyFlag") === false) {
      // ...
    }

    // ...
  } catch (error) {
    // ...
  }
}

3. Call the route

Expected behavior

The server-side methods should not use any client-side methods.

Logs, error output, etc.

error - node_modules/@unleash/proxy-client-react/dist/index.js (1:805) @ createContext                                                                                                                                                                                                             
error - createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component                                                                                                    
    at eval (webpack-internal:///(sc_server)/./node_modules/@unleash/proxy-client-react/dist/index.js:40:259)                                                                                                                                                                                      
    at eval (webpack-internal:///(sc_server)/./node_modules/@unleash/proxy-client-react/dist/index.js:257:3)                                                                                                                                                                                       
    at (sc_server)/./node_modules/@unleash/proxy-client-react/dist/index.js (/Users/simon.knittel/Documents/personal/dashboard/app/.next/server/app/api/project-member/route.js:627:1)                                                                                                             
    at __webpack_require__ (/Users/simon.knittel/Documents/personal/dashboard/app/.next/server/webpack-runtime.js:33:43)                                                                                                                                                                           
    at eval (webpack-internal:///(sc_server)/./node_modules/@unleash/nextjs/dist/FlagProvider.js:7:30)                                                                                                                                                                                             
    at (sc_server)/./node_modules/@unleash/nextjs/dist/FlagProvider.js (/Users/simon.knittel/Documents/personal/dashboard/app/.next/server/app/api/project-member/route.js:363:1)                                                                                                                  
    at __webpack_require__ (/Users/simon.knittel/Documents/personal/dashboard/app/.next/server/webpack-runtime.js:33:43)                                                                                                                                                                           
    at eval (webpack-internal:///(sc_server)/./node_modules/@unleash/nextjs/dist/index.js:30:14)                                                                                                                                                                                                   
    at (sc_server)/./node_modules/@unleash/nextjs/dist/index.js (/Users/simon.knittel/Documents/personal/dashboard/app/.next/server/app/api/project-member/route.js:594:1)                                                                                                                         
    at __webpack_require__ (/Users/simon.knittel/Documents/personal/dashboard/app/.next/server/webpack-runtime.js:33:43)                                                                                                                                                                           
    at eval (webpack-internal:///(sc_server)/./src/app/api/project-member/route.ts:6:73)                                                                                                                                                                                                           
    at (sc_server)/./src/app/api/project-member/route.ts (/Users/simon.knittel/Documents/personal/dashboard/app/.next/server/app/api/project-member/route.js:3361:1)                                                                                                                               
    at __webpack_require__ (/Users/simon.knittel/Documents/personal/dashboard/app/.next/server/webpack-runtime.js:33:43)                                                                                                                                                                           
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fproject-member%2Froute&page=%2Fapi%2Fproject-member%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fproject-member%2Froute.ts&appDir=%2FUsers%2Fsimon.knitt
el%2FDocuments%2Fpersonal%2Fdashboard%2Fapp%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fsimon.knittel%2FDocuments%2Fpersonal%2Fdashboard%2Fapp&isDev=true&tsconfigPath=tsconfig.json&assetPrefix=&nextConfigOutput=!:13:147)          
    at (sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fproject-member%2Froute&page=%2Fapi%2Fproject-member%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fproject-member%2Froute.ts&appDir=%2FUsers%2Fsimon.knittel%2FDocuments%2Fpersonal%
2Fdashboard%2Fapp%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fsimon.knittel%2FDocuments%2Fpersonal%2Fdashboard%2Fapp&isDev=true&tsconfigPath=tsconfig.json&assetPrefix=&nextConfigOutput=! (/Users/simon.knittel/Documents/personal/da
shboard/app/.next/server/app/api/project-member/route.js:308:1)                                                                                                                                                                                                                                    
    at __webpack_require__ (/Users/simon.knittel/Documents/personal/dashboard/app/.next/server/webpack-runtime.js:33:43)                                                                                                                                                                           
    at __webpack_exec__ (/Users/simon.knittel/Documents/personal/dashboard/app/.next/server/app/api/project-member/route.js:4768:39)                                                                                                                                                               
    at /Users/simon.knittel/Documents/personal/dashboard/app/.next/server/app/api/project-member/route.js:4769:28                                                                                                                                                                                  
    at Object.<anonymous> (/Users/simon.knittel/Documents/personal/dashboard/app/.next/server/app/api/project-member/route.js:4772:3)                                                                                                                                                              
    at Module._compile (node:internal/modules/cjs/loader:1254:14)                                                                                                                                                                                                                                  
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)                                                                                                                                                                                                                           
    at Module.load (node:internal/modules/cjs/loader:1117:32)                                                                                                                                                                                                                                      
    at Module._load (node:internal/modules/cjs/loader:958:12)                                                                                                                                                                                                                                      
    at Module.require (node:internal/modules/cjs/loader:1141:19)                                                                                                                                                                                                                                   
    at require (node:internal/modules/cjs/helpers:110:18)                                                                                                                                                                                                                                          
    at Object.requirePage (/Users/simon.knittel/Documents/personal/dashboard/app/node_modules/next/dist/server/require.js:134:12)                                                                                                                                                                  
    at /Users/simon.knittel/Documents/personal/dashboard/app/node_modules/next/dist/server/load-components.js:51:73                                                                                                                                                                                
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)                                                                                                                                                                                                                  
    at async Object.loadComponentsImpl [as loadComponents] (/Users/simon.knittel/Documents/personal/dashboard/app/node_modules/next/dist/server/load-components.js:51:26)                                                                                                                          
    at async DevServer.findPageComponentsImpl (/Users/simon.knittel/Documents/personal/dashboard/app/node_modules/next/dist/server/next-server.js:667:36) {                                                                                                                                        
  name: 'TypeError',                                                                                                                                                                                                                                                                               
  digest: undefined                                                                                                                                                                                                                                                                                
}                                                                                                                                                                                                                                                                                                  
null

Screenshots

Additional context

Next.js 13 app directory Route Handler

Unleash version

4.22.3

Subscription type

Open source

Hosting type

Self-hosted

SDK information (language and version)

@unleash/nextjs 0.1.2

[Tymek]

I'll look into that. App directory support is a priority.