getContext creates GraphQL duplicate error

[mandymozart]

I was trying to build a standalone version of examples/framework-nextjs-app-directory.
I locked the graphql version to 16.8.1 which solved some dependencies issues as well as stopped using yarn, which made the prisma client basically uncontrolleable ending up in various locations inside the node_modules folder.

I got the project running again but am still not able to access context via getContext as described in the example.

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

This is my package.json

  "name": "vibesss",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "keystone:dev": "dotenvx run -- keystone dev",
    "keystone:start": "dotenvx run -- keystone start",
    "keystone:build": "dotenvx run -- keystone build",
    "keystone:postinstall": "keystone build --no-ui --frozen",
    "next:dev": "dotenvx run -- next dev",
    "next:build": "dotenvx run -- next build",
    "next:start": "dotenvx run -- next start",
    "next:lint": "dotenvx run -- next lint",
    "postinstall": "prisma generate && keystone postinstall"
  },
  "dependencies": {
    "@dotenvx/dotenvx": "^0.45.0",
    "@keystone-6/auth": "^7.0.0",
    "@keystone-6/core": "^5.0.0",
    "@keystone-6/document-renderer": "^1.1.2",
    "@keystone-6/fields-document": "^7.0.0",
    "@prisma/client": "^5.15.1",
    "graphql": "16.8.1",
    "graphql-request": "^7.1.0",
    "graphql-yoga": "^5.4.0",
    "next": "^14.2.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "typescript": "^4.9.5"
  },
  "devDependencies": {
    "prisma": "^5.15.1",
    "syncpack": "^12.3.2"
  },
  "resolutions": {
    "graphql": "16.8.1"
  }
}

My context.ts

import { getContext } from '@keystone-6/core/context';
import config from '../../keystone';
import { Context } from '.keystone/types';
import * as PrismaModule from '.prisma/client';

// Making sure multiple prisma clients are not created during dev hot reloading
export const keystoneContext: Context =
  (globalThis as any).keystoneContext || getContext(config, PrismaModule);

if (process.env.NODE_ENV !== 'production') {
  (globalThis as any).keystoneContext = keystoneContext;
}

NODE VERSION v18.19.1

Any help appreciated how to detect where and why there is two versions of GRAPHQL used.

I was using 'syncpack' to see if there is any duplicates, and manually, but I can not see any.

Switching to PNPM caused more problems than it solved for this nextjs, keystone mutant ;)

[marekryb]

Hi,

Most probably you have correct graphql versions, but it is being transpiled differently by keystone and nextjs (code for check)
Try modifying your next.config.js like below (experimental.serverComponentsExternalPackages):
https://github.com/keystonejs/keystone/blob/main/examples/framework-nextjs-app-directory/next.config.mjs

[mandymozart]

hello marek, i will try it out. confident that i will get it to work. thanks

I run into a dependency, maybe you or someone else got a tip, and it's preventing me from testing if the context works now.

I ported my app from a pure react to nextjs, and hell I loved emotions, and wanted to continoue using it, for at least all those components, that are not pre-hydrated with data. My hope was to gradually migrate to another solution of css encapsulation.

only when I use the above recommended experimental.serverComponentsExternalPackes: ['graphql'] this error appears.

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
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
node_modules/@emotion/react/dist/emotion-element-c16c303e.esm.js (14:42)
(rsc)/./node_modules/@emotion/react/dist/emotion-element-c16c303e.esm.js
file:/home/mandymozart/Development/sandbox/vibesss/.next/server/vendor-chunks/@emotion.js (200:1)
Next.js
eval
/./node_modules/@emotion/react/dist/emotion-react.esm.js
(rsc)/./node_modules/@emotion/react/dist/emotion-react.esm.js
file:/home/mandymozart/Development/sandbox/vibesss/.next/server/vendor-chunks/@emotion.js (210:1)

the page i use to test does not use any emotion. i simply use the example from framework-nextjs-app-directory

import React from 'react'
import { keystoneContext } from '../../keystone/context'
import { DocumentRender } from '../../components/DocumentRender'

export default async function HomePage () {
  const session = {}
  const users = await keystoneContext.withSession(session).query.User.findMany({
    query: 'id name about { document }',
  })
  ...
}

[marekryb]

Hi,

I have never used @emotion/react, so no definite answer from me, sorry. That being said, I found this comment from few months ago emotion-js/emotion#2928 (comment) Seems there are some additional steps necessary to make it work at all.

In your place I would try:

1. Temporarily removing all imports of keystoneContext to see if @emotion/react is working without keystone (I would assume not).
2. Temporarily switching to example with pages directory with both keystone and emotion (I would assume it will work fine).