Admin UI continually compiling #7902

MadeByMike · 2022-09-09T03:28:12Z

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

The text was updated successfully, but these errors were encountered:

cyanonoob · 2022-09-09T10:19:08Z

Can confirm, having the same issue with a vanilla keystonekjs project. Running on manjaro with node 16.13.1 and 14.16.0.

limegorilla · 2022-09-09T14:39:44Z

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

christianpedersen · 2022-09-09T17:46:00Z

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.

jschuur · 2022-09-09T19:07:59Z

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.

Faiyyaz · 2022-09-10T08:29:19Z

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.

cyanonoob · 2022-09-10T10:28:51Z

Is it possible that the autobuilder in dev mode is watching something get compiled, inadvertently triggering itself again?

Shpackk · 2022-09-10T23:07:06Z

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

dcousens · 2022-09-11T04:51:05Z

For those having problems, can you try changing your next version to next@12.2.4?
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 🙏

ethras · 2022-09-11T05:10:25Z

For those having problems, can you try changing your next version to next@12.2.4? 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 🙏

Facing the same issue but only when adding keystone to a turborepo. I tried with version "next@12.2.4" but no luck. Any way to try out with esbuild on main branch?

jschuur · 2022-09-11T07:07:32Z

For those having problems, can you try changing your next version to next@12.2.4?

Edit: Using resolutions as described below fixed it in yarn for me too.

cyanonoob · 2022-09-11T08:57:57Z

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.

flexdinesh · 2022-09-12T01:16:32Z

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"
}

MadeByMike · 2022-09-12T01:51:04Z

Can confirm that running yarn add next@12.2.4 then adding:

"resolutions": {
  "next": "12.2.4"
}

to the package.json seems to have worked for me.

jordie23 · 2022-09-12T01:57:59Z

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.

yowlonglee · 2022-09-12T03:16:39Z

For people using npm, run npm install next@12.2.4 then adding:

"overrides": {
  "next": "12.2.4"
}

to package.json worked for me.

dcousens · 2022-09-12T05:09:31Z

For `yarn` users

See @MadeByMike's comment

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 next@12.2.4 graphql@^15.8.0 to get started with npm create keystone-app until keystonejs/create-keystone-app#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

> keystone-app@1.0.1 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 next@12.2.4

added 3 packages, removed 1 package, changed 8 packages, and audited 925 packages in 7s
... omitted

$ npm run dev

> keystone-app@1.0.1 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: graphql-upload@15.0.2
npm WARN Found: graphql@15.8.0
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 graphql-upload@15.0.2
npm WARN node_modules/graphql-upload
npm WARN   graphql-upload@"^15.0.2" from @keystone-6/core@2.2.0
npm WARN   node_modules/@keystone-6/core
npm WARN
npm WARN Conflicting peer dependency: graphql@16.6.0
npm WARN node_modules/graphql
npm WARN   peer graphql@"^16.3.0" from graphql-upload@15.0.2
npm WARN   node_modules/graphql-upload
npm WARN     graphql-upload@"^15.0.2" from @keystone-6/core@2.2.0
npm WARN     node_modules/@keystone-6/core

removed 3 packages, changed 1 package, and audited 922 packages in 3s

... omitted

$ npm run dev

> keystone-app@1.0.1 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)

cyanonoob · 2022-09-13T11:43:01Z

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!

pvaladez · 2022-09-14T17:43:22Z

I needed to delete node_modules/ and then reinstall packages with yarn after doing yarn add next@12.2.4 and adding

"resolutions": {
  "next": "12.2.4"
}

to package.json.

linus-ha · 2022-09-14T17:45:17Z

Would be great if someone could notify us here, when it's time to remove the "resolutions" from our package.json.

MadeByMike · 2022-09-14T23:10:59Z

@linus-ha you can't remove things from package.json only add ...forever 😜

dcousens · 2022-09-15T00:58:20Z

@linus-ha my intention is to leave this issue open and pinned until the next major release which will resolve these problems 💙 - I will happily notify this thread when I close

christiannaths · 2022-09-16T15:29:18Z

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: yarnpkg/yarn#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 😅

naveenmatt · 2022-09-18T06:30:10Z

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"
}

This worked for me, thanks :)

dcousens · 2022-10-19T00:29:50Z

This has been resolved with the newest major release 📦.

Please don't forget to remove your resolutions or overrides when upgrading.
Thanks for hanging in there everyone! 🙏

This comment was marked as outdated.

Sign in to view

dcousens mentioned this issue Sep 12, 2022

Force next@12.2.4 until esbuild update keystonejs/create-keystone-app#350

Merged

MadeByMike closed this as completed Sep 14, 2022

dcousens reopened this Sep 15, 2022

dcousens pinned this issue Sep 15, 2022

Utzel-Butzel mentioned this issue Oct 3, 2022

Constantly recompiling in development mode #7978

Closed

rburgst mentioned this issue Oct 12, 2022

Postinstall hook throws Prisma error when using pnpm: Command failed with exit code 1: npm install -D prisma@latest #7625

Closed

dcousens assigned dcousens and unassigned dcousens Oct 13, 2022

dcousens closed this as completed Oct 19, 2022

dcousens unpinned this issue Oct 19, 2022

keystonejs locked as resolved and limited conversation to collaborators Nov 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Admin UI continually compiling #7902

Admin UI continually compiling #7902

MadeByMike commented Sep 9, 2022 •

edited

Loading

cyanonoob commented Sep 9, 2022

This comment was marked as outdated.

limegorilla commented Sep 9, 2022 •

edited

Loading

christianpedersen commented Sep 9, 2022

jschuur commented Sep 9, 2022

Faiyyaz commented Sep 10, 2022 •

edited

Loading

cyanonoob commented Sep 10, 2022

Shpackk commented Sep 10, 2022

dcousens commented Sep 11, 2022 •

edited

Loading

ethras commented Sep 11, 2022

jschuur commented Sep 11, 2022 •

edited

Loading

cyanonoob commented Sep 11, 2022 •

edited

Loading

flexdinesh commented Sep 12, 2022

MadeByMike commented Sep 12, 2022

jordie23 commented Sep 12, 2022

yowlonglee commented Sep 12, 2022

dcousens commented Sep 12, 2022 •

edited

Loading

cyanonoob commented Sep 13, 2022

pvaladez commented Sep 14, 2022

linus-ha commented Sep 14, 2022

MadeByMike commented Sep 14, 2022

dcousens commented Sep 15, 2022 •

edited

Loading

christiannaths commented Sep 16, 2022 •

edited

Loading

naveenmatt commented Sep 18, 2022

dcousens commented Oct 19, 2022

Admin UI continually compiling #7902

Admin UI continually compiling #7902

Comments

MadeByMike commented Sep 9, 2022 • edited Loading

cyanonoob commented Sep 9, 2022

This comment was marked as outdated.

limegorilla commented Sep 9, 2022 • edited Loading

christianpedersen commented Sep 9, 2022

jschuur commented Sep 9, 2022

Faiyyaz commented Sep 10, 2022 • edited Loading

cyanonoob commented Sep 10, 2022

Shpackk commented Sep 10, 2022

dcousens commented Sep 11, 2022 • edited Loading

ethras commented Sep 11, 2022

jschuur commented Sep 11, 2022 • edited Loading

cyanonoob commented Sep 11, 2022 • edited Loading

flexdinesh commented Sep 12, 2022

MadeByMike commented Sep 12, 2022

jordie23 commented Sep 12, 2022

yowlonglee commented Sep 12, 2022

dcousens commented Sep 12, 2022 • edited Loading

For yarn users

For npm users

cyanonoob commented Sep 13, 2022

pvaladez commented Sep 14, 2022

linus-ha commented Sep 14, 2022

MadeByMike commented Sep 14, 2022

dcousens commented Sep 15, 2022 • edited Loading

christiannaths commented Sep 16, 2022 • edited Loading

naveenmatt commented Sep 18, 2022

dcousens commented Oct 19, 2022

MadeByMike commented Sep 9, 2022 •

edited

Loading

limegorilla commented Sep 9, 2022 •

edited

Loading

Faiyyaz commented Sep 10, 2022 •

edited

Loading

dcousens commented Sep 11, 2022 •

edited

Loading

jschuur commented Sep 11, 2022 •

edited

Loading

cyanonoob commented Sep 11, 2022 •

edited

Loading

dcousens commented Sep 12, 2022 •

edited

Loading

For `yarn` users

For `npm` users

dcousens commented Sep 15, 2022 •

edited

Loading

christiannaths commented Sep 16, 2022 •

edited

Loading