Next ^13.4 is not working with Keystone

[unbywyd]

New installation is not working, there is a problem with Next.js. It is necessary to manually downgrade to version 13.3.4, as the default installation installs the latest version ^13.4 which does not work

1. new installation with npm / npx
2. cd app and npm run dev
3. everything is fine until you try to open a running project in the browser:

By the way, I've noticed that if you install a version of Next.js lower than 13.3.4, the build process gets stuck, which can cause issues. To fix this, you can try changing the package dependency to a specific version of Next.js, such as "next:": "13.3.4", instead of using the default "^13.3.0". This should help mitigate the problem and allow the build process to complete successfully.

[molotow11]

I have the same issue with latest version, checked with default project setup from examples

[gautamsi]

use resolution to pin nextjs version to 13.3.4

[molotow11]

@gautamsi
Thanks, works with resolutions (need to be in top level package.json if monorepo).

  "resolutions": {
    "next": "13.3.4"
  }

[mmachatschek]

I've also bumped into this issue. Pinning to 13.3.4 works for me too

[MohammadKurjieh]

Pinning to version 13.3.4 works. @gautamsi Any idea what might have caused this issue?

[Thinkscape]

👍 would love to start using 13.4

[MohammadKurjieh]

I was able to resolve the issue, it was caused by the appDir being set to true in next v13.4 and above.
Reference on Nextjs: vercel/next.js#49261 and vercel/next.js#49251

Check the following pull request for more details: #8568

[beerdedfellow]

Hello, this fix is not working for me:

t $ npm run dev

> keystone-app@1.0.2 dev
> keystone dev

✨ Starting Keystone
⭐️ Server listening on :3000 (http://localhost:3000/)
⭐️ GraphQL API available at /api/graphql
✨ Generating GraphQL and Prisma schemas
✨ sqlite database "keystone.db" created at file:./keystone.db
✨ Your database is now in sync with your schema. Done in 200ms
✨ Connecting to the database
✨ Creating server
✅ GraphQL API ready
✨ Generating Admin UI code
✨ Preparing Admin UI app
- event compiled client and server successfully in 2.2s (1706 modules)
- wait compiling...
✅ Admin UI ready
- event compiled client and server successfully in 214 ms (1706 modules)
- wait compiling /_error (client and server)...
- event compiled client and server successfully in 140 ms (1707 modules)
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (/Users/rhutchison/keystone_test/test/node_modules/react/cjs/react.development.js:1618:21)
    at useTheme (/Users/rhutchison/keystone_test/test/node_modules/@keystone-ui/core/dist/keystone-ui-core.cjs.dev.js:839:13)
    at BaseCSS (/Users/rhutchison/keystone_test/test/node_modules/@keystone-ui/core/dist/keystone-ui-core.cjs.dev.js:1286:7)
    at renderWithHooks (/Users/rhutchison/keystone_test/test/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8674:16)

EDIT: I no longer have this issue but leaving this for context. I've never worked with yarn and was not familiar with resolutions. Now I know why :) (resolutions is a yarn directive).

[rpmcoding]

@dcousens could this fix be updated in the yarn create keystone-app package? Currently I still can't install keystone.

[dcousens]

@rpmcoding could you try out our newest rc snapshot? https://www.npmjs.com/package/@keystone-6/core?activeTab=versions

If that resolves your problem, we should have that officially released on Monday.

[Durwinner]

Keystone requires a higher version of Next.js, specifically version 13.3 or above. If you encounter an error, please make sure to use at least this version. To fix the issue, you can add the following code to your package.json file:

"resolutions": {
  "next": "~13.3.0"
}

By adding this code, you're specifying a resolution to use Next.js version 13.3.0 or a compatible version. This can help resolve the problem you're facing. Make sure to save the package.json file after making this change.