Cannot set Keystone up inside a monorepo

[limegorilla]

Okay - I run a number of sites under one Keystone instance. The idea is I wanted something like the below:

my-wonderful-monorepo /
  apps /
    keystone /
    site1 /
    site2 /
    site3 /
    etc...

I'm using turborepo for this (mainly because I assumed it being a vercel-owned property that would make this easier) which uses Yarn Workspaces under the hood.

I'm aware other (solved) issues exist - including some outside this repo. I'll link the ones I have tried for reference:

• Install a npm package in two different version (vue2 and vue3), and failed to starting dev server vercel/turbo#1022
• Nx monorepo support? #7220

My issue seems to be that Keystone is seeing two versions of NextJS - the version I have given it (12.3.1 as it currently is inside my separated repository) according to this

So when I try and launch the admin UI, I get this:

TypeError: Cannot destructure property 'inAmpMode' of '(0 , _react).useContext(...)' as it is null.

What I have tried

• Manually specifying next: 12.3.1 in apps/keystone/package.json
• Hoisting next entirely
• Creating a brand new keystone project
• Updating Keystone to the latest version
• Updating my Keystone package to the same version as the other ones used in my project

No changes.

My environment:
Node v16.18.0
Yarn 1.22.19
Next 13.0.1

I have a demo here

[flexdinesh]

I don't think Keystone is the root of this issue (although it is happening because keystone comes with its own Next.js version). We have used Keystone in monorepo setups with Next.js apps. Our e2e-boilerplate example uses Keystone with yarn workspaces.

If your keystone project runs as a server and all your site1, site2, etc are independent apps and are fetching data from the GraphQL API of your keystone server then your Next.js versions in site1, site2, etc can be independent of your keystone server Next.js version. However if you are importing getContext or other exports from your keystone app into your site1, site2, etc then your Next.js version should match the Next.js version of your keystone-6/core Next.js version or you'll run into the multiple Next.js versions problem you are running into. It's a monorepo thing and how you solve it is gonna depend on how your monorepo is setup. For example, the keystone monorepo uses manypkg to avoid dependency issues like this.

[limegorilla]

Hmmm. This is what I thought - the sites are not importing anything - it's all GraphQL work.

I've tried installing manypkg - it seemed to resolve dependency issues but it doesn't seem to be working - keystone still gives me the same error trying to access the admin UI.

I have fixed this - I've disabled hoisting over the entire monorepo - this seems to be a Yarn v1 issue: yarnpkg/yarn#7572

@flexdinesh thanks for your help with this!

For future people running into this problem - here is what I changed. It seems to be a Yarnv1 issue, and I will start looking at migrating to Yarnv2. But for those on V1, I have a structure similar to this:

my-cool-monorepo /
  apps /
    app1 / NextJS 13 website
    app2 / ^^
    keystone-install / Standard Keystone install
  packages /
    package1 / Think like shared config, UI library etc.
    package2 /
  package.json <See below>
  turbo.json
  node_modules /
  {...}

My package.json looks like this

{
  "name": "sites",
  "version": "0.0.0",
  "private": true,
  "workspaces": {
    "packages": [
      "apps/*",
      "packages/*"
    ],
    "nohoist": [
      "**" // THIS DISABLES HOISTING OVER THE WHOLE REPO. See the above Yarn issue (due to an issue w/ Yarn v1)
    ]
  },
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev --parallel",
    "lint": "turbo run lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\""
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "dependencies": {
    "@manypkg/cli": "^0.19.2",
    "eslint-config-custom": "*",
    "prettier": "latest",
    "turbo": "latest"
  },
  "packageManager": "yarn@1.22.19"
}