keystone
keystone copied to clipboard
keystonejs
Admin UI continually compiling
On a Linux\WSL machine start a new project following the quick start guide: https://keystonejs.com/docs/walkthroughs/getting-started-with-create-keystone-app#quick-start
Run yarn dev
It should compile once, then as required by Next while editing code and browsing.
- Confirmed it is working correctly on Windows.
- Confirmed it's not happening for prod builds.
- It might be happening for CI running in production.
- I assume developers have tested this on Mac.
- Confirmed it to be the AdminUI and not a NextJS problem.
Linux:
Windows:
Next version: v.12.3.0
Can confirm, having the same issue with a vanilla keystonekjs project. Running on manjaro with node 16.13.1 and 14.16.0.
Can also confirm. Am getting a console warning for the <head> element appearing inside a <div>:
Warning: validateDOMNesting(...): <head> cannot appear as a child of <div>.
at head
at div
at SigninContainer (webpack-internal:///../../node_modules/@keystone-6/auth/dist/useFromRedirect-cd014bce.esm.js:17:5)
at InitPage (webpack-internal:///../../node_modules/@keystone-6/auth/pages/InitPage/dist/keystone-6-auth-pages-InitPage.esm.js:261:5)
at ErrorBoundary (webpack-internal:///../../node_modules/@keystone-6/core/dist/Errors-07329dd1.esm.js:20:5)
at DrawerProvider (webpack-internal:///../../node_modules/@keystone-ui/modals/dist/keystone-ui-modals.esm.js:54:5)
at ToastProvider (webpack-internal:///../../node_modules/@keystone-ui/toast/dist/keystone-ui-toast.esm.js:41:5)
at InternalKeystoneProvider (webpack-internal:///../../node_modules/@keystone-6/core/admin-ui/context/dist/keystone-6-core-admin-ui-context.esm.js:343:5)
at ApolloProvider (webpack-internal:///../../node_modules/@apollo/client/react/context/ApolloProvider.js:12:21)
at KeystoneProvider (webpack-internal:///../../node_modules/@keystone-6/core/admin-ui/context/dist/keystone-6-core-admin-ui-context.esm.js:394:14)
at Core (webpack-internal:///../../node_modules/@keystone-ui/core/dist/keystone-ui-core.esm.js:1308:5)
at eval (webpack-internal:///../../node_modules/@keystone-6/core/___internal-do-not-use-will-break-in-patch/admin-ui/pages/App/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-App.esm.js:83:5)
at ErrorBoundary (webpack-internal:///../../node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)
at ReactDevOverlay (webpack-internal:///../../node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)
at Container (webpack-internal:///../../node_modules/next/dist/client/index.js:70:9)
at AppContainer (webpack-internal:///../../node_modules/next/dist/client/index.js:215:26)
at Root (webpack-internal:///../../node_modules/next/dist/client/index.js:406:27)
Running MacOS Ventura
This worked for me: Go to line 25 in auth.ts and change the sessionSecret to something else than the provided one. Not sure if it is related, but it stopped giving me compiled loop.
This worked for me: Go to line 25 in auth.ts and change the sessionSecret to something else than the provided one. Not sure if it is related, but it stopped giving me compiled loop.
Didn't seem to work for me.
I also ran into an endless loop after simply running yarn create keystone-app keystone-test and then yarn dev in the new dir.
I initially got 4.0.0 of @keystone-6/auth e.g., but even after upgrading to the latest versions, still the same problem.
I am also facing the same issue in macOS. I tried running the task-manager example too from the repository even in that code the issue persist.
FYI, this is happening in dev environment i tried building the production environment and the compiling issue went away.
Is it possible that the autobuilder in dev mode is watching something get compiled, inadvertently triggering itself again?
This worked for me: Go to line 25 in auth.ts and change the sessionSecret to something else than the provided one. Not sure if it is related, but it stopped giving me compiled loop.
Did not help . Facing same issue
For those having problems, can you try changing your next version to [email protected]?
This problem should be resolved with our recent switch to esbuild but that is not released yet; and in the interim, reverting to the previous version of next should help.
Please reply back if that works for you :pray:
For those having problems, can you try changing your
nextversion to[email protected]? This problem should be resolved with our recent switch toesbuildbut that is not released yet; and in the interim, reverting to the previous version of next should help.Please reply back if that works for you 🙏
Facing the same issue but only when adding keystone to a turborepo. I tried with version "[email protected]" but no luck. Any way to try out with esbuild on main branch?
For those having problems, can you try changing your
nextversion to[email protected]?
Edit: Using resolutions as described below fixed it in yarn for me too.
After trying:
{ "name": "keystone-app", "version": "1.0.1", "private": true, "scripts": { "dev": "keystone dev", "start": "keystone start", "build": "keystone build", "postinstall": "keystone postinstall" }, "dependencies": { "@keystone-6/auth": "^4.0.0", "@keystone-6/core": "^2.1.0", "@keystone-6/fields-document": "^4.0.0", "typescript": "^4.7.4" }, "engines": { "node": "^14.15 || ^16.13" }, "overrides": { "next": "12.2.4" } }
I still have the same issue, also with trying rm -rf ./node_modules; yarn; yarn dev;
Edit: also tried with most recent releases of all packages, to no avail.
Changing the next version to 12.2.4 using yarn resolutions fixes this issue.
Add this to your package.json. Note: resolutions will only work with yarn.
"resolutions": {
"next": "12.2.4"
}
Can confirm that running yarn add [email protected] then adding:
"resolutions": {
"next": "12.2.4"
}
to the package.json seems to have worked for me.
We've been seeing this issue for a while but as we weren't doing a lot of development on keystone itself we've been running a built (i.e. non-dev) version. When we run npm run dev it has this problem. It's been around for a while but we figured it was because we're running behind on upgrading keystone. We are on version 1.1.1 of keystone and are about to try to update. I can see locally I had nextjs version 12.1.6 with this issue.
We're also using npm so looks like the resolutions fix won't work for us.
We'll update keystone and see how we go, but did just want to add that we've been seeing the infinite compiling for quite a while now.
For people using npm, run npm install [email protected] then adding:
"overrides": {
"next": "12.2.4"
}
to package.json worked for me.
For yarn users
For npm users
If you are using npm, you will need to install graphql@^15.8.0 too.
You may not need the overrides; but npm might opt to ignore you depending on how it resolves the dependencies.
See below for a dump of a log where I was able to reproduce this problem; and the steps I took to resolve it.
(tl;dr, use npm install [email protected] graphql@^15.8.0 to get started with npm create keystone-app until https://github.com/keystonejs/create-keystone-app/pull/350 is merged).
$ npm create keystone-app keystone-test-npm
✨ You're about to generate a project using Keystone 6 packages.
✔ Installed dependencies with yarn.
🎉 Keystone created a starter project in: keystone-test-npm
To launch your app, run:
- cd keystone-test-npm
- yarn dev
Next steps:
- Read keystone-test-npm/README.md for additional getting started details.
- Edit keystone-test-npm/keystone.ts to customize your app.
- Open the Admin UI (http://localhost:3000)
- Open the Graphql API (http://localhost:3000/api/graphql)
- Read the docs (https://next.keystonejs.com)
- Star Keystone on GitHub (https://github.com/keystonejs/keystone)
$ cd keystone-test-npm/
$ npm run dev
> [email protected] dev
> keystone dev
✨ Starting Keystone
⭐️ Dev Server Starting on http://localhost:3000
⭐️ GraphQL API Starting on http://localhost:3000/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 387ms
✨ Connecting to the database
✨ Creating server
✅ GraphQL API ready
✨ Generating Admin UI code
✨ Preparing Admin UI app
event - compiled client and server successfully in 5.3s (1457 modules)
✅ Admin UI ready
wait - compiling /api/__keystone_api_build (client and server)...
event - compiled successfully in 94 ms (199 modules)
wait - compiling...
event - compiled client and server successfully in 201 ms (1474 modules)
wait - compiling...
event - compiled client and server successfully in 183 ms (1474 modules)
wait - compiling...
event - compiled client and server successfully in 158 ms (1474 modules)
wait - compiling...
event - compiled client and server successfully in 136 ms (1474 modules)
wait - compiling...
event - compiled client and server successfully in 132 ms (1474 modules)
wait - compiling...
event - compiled client and server successfully in 119 ms (1474 modules)
^C
$ npm install [email protected]
added 3 packages, removed 1 package, changed 8 packages, and audited 925 packages in 7s
... omitted
$ npm run dev
> [email protected] dev
> keystone dev
✨ Starting Keystone
⭐️ Dev Server Starting on http://localhost:3000
⭐️ GraphQL API Starting on http://localhost:3000/api/graphql
Error: Cannot use GraphQLInputObjectType "{ name: "IDFilter", description: undefined, extensions: {}, astNode: undefined, extensionASTNodes: [], _fields: [function bound defineInputFieldMap] }" from another module or realm.
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.
https://yarnpkg.com/en/docs/selective-version-resolutions
Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.
at ... omitted
$ npm install graphql@^15.8.0
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/graphql
npm WARN graphql@"^15.8.0" from the root project
npm WARN 34 more (@apollo/client, @apollo/utils.dropunuseddefinitions, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^16.3.0" from [email protected]
npm WARN node_modules/graphql-upload
npm WARN graphql-upload@"^15.0.2" from @keystone-6/[email protected]
npm WARN node_modules/@keystone-6/core
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/graphql
npm WARN peer graphql@"^16.3.0" from [email protected]
npm WARN node_modules/graphql-upload
npm WARN graphql-upload@"^15.0.2" from @keystone-6/[email protected]
npm WARN node_modules/@keystone-6/core
removed 3 packages, changed 1 package, and audited 922 packages in 3s
... omitted
$ npm run dev
> [email protected] dev
> keystone dev
✨ Starting Keystone
⭐️ Dev Server Starting on http://localhost:3000
⭐️ GraphQL API Starting on http://localhost:3000/api/graphql
✨ Generating GraphQL and Prisma schemas
✨ The database is already in sync with the Prisma schema.
✨ Connecting to the database
✨ Creating server
✅ GraphQL API ready
✨ Generating Admin UI code
✨ Preparing Admin UI app
event - compiled client and server successfully in 5.3s (1456 modules)
✅ Admin UI ready
wait - compiling /api/__keystone_api_build...
event - compiled successfully in 102 ms (199 modules)
Can confirm this works with next 12.2.4, can also confirm to have learned to use "resolutions" instead of "overrides" with yarn. Double thanks!
I needed to delete node_modules/ and then reinstall packages with yarn after doing yarn add [email protected] and adding
"resolutions": {
"next": "12.2.4"
}
to package.json.
Would be great if someone could notify us here, when it's time to remove the "resolutions" from our package.json.
@linus-ha you can't remove things from package.json only add ...forever 😜
@linus-ha my intention is to leave this issue open and pinned until the next major release which will resolve these problems :blue_heart: - I will happily notify this thread when I close
~Any ideas on how to work around this when running inside a yarn monorepo? "resolutions" doesn't seem to work (at either the packages/* level or the monorepo root), I think due to this bug: https://github.com/yarnpkg/yarn/issues/5039~
~Is there a known previous version I can downgrade to until this can be resolved here?~
And of course seconds after I leave this comment I realized my mistake, I hadn't specifically added "next": "12.2.4" to my dependencies directly. My package-level package.json now looks like this:
...
"dependencies": {
"@keystone-6/auth": "^4.0.0",
"@keystone-6/core": "^2.1.0",
"@keystone-6/fields-document": "^4.0.0",
"dotenv": "^16.0.2",
+ "next": "12.2.4",
"typescript": "^4.7.4"
},
"resolutions": {
"next": "12.2.4"
},
...
and my root-level package.json like this:
...
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.31.0",
"@typescript-eslint/parser": "^5.31.0",
"@typescript-eslint/utils": "^5.37.0",
"eslint": "^8.20.0",
"lerna": "^5.3.0",
"prettier": "^2.7.1",
"typescript": "^4.7.4"
},
"resolutions": {
"next": "12.2.4"
},
...
And the issue seems to have gone away 😅
Changing the next version to
12.2.4using yarnresolutionsfixes this issue.Add this to your
package.json. Note: resolutions will only work with yarn."resolutions": { "next": "12.2.4" }
This worked for me, thanks :)
This has been resolved with the newest major release :package:.
Please don't forget to remove your resolutions or overrides when upgrading.
Thanks for hanging in there everyone! :pray: