yarn dev works but after I do yarn build and then yarn serve is stuck at
INFO (payload): Payload Admin URL: http://localhost:3000/admin
it's not returning:
webpack built 2b9ccfee51055761c648 in 10716ms
webpack compiled successfully
and on the browser I get black page. Does this both on local and on deploy. Last week it was working.
It's loading some data, in the browser I see this error:
Uncaught (in promise) o: Field is either missing a field type or it does not match an available field type
so looks like the build process had some issue
the same thing happens exactly on local and on remote
Good morning! One of your collection fields appears to be configured incorrectly
Do you have any context on which collection may be having an issue?
To add to this, it means you're missing a
type
property on one of your fields. Does it mention which field?
It didn't mention anything else about the error so I couldn't find it. I turned typescript
strict mode
on, but I didn't have any errors in development.
As a last resort I pulled the old version from gitlab that I knew was working, and gradually moved my collections (which were not many) and the build and serve worked there with the exact same code (I checked with WinMerge).
So then I copied over the yarn.lock and package-lock.json, cleared directories
build
,
dist
,
node_modules
and run npm ci, yarn build and yarn serve. Everything magically worked.
I've never heard of
npm ci
before and to be honest I've never bothered about lock files, this is the first time I've had an issue like this. To be honest I've never worked with so many dependencies, so I guess it's important to keep the lock files.
This issue is technically solved, but it still puzzle me why during dev and build no errors were reported.
You should only have either a package-lock or yarn.lock, they are files that manage your node_modules
There may have been a conflict due to that, though it's hard to tell without more context
I didn't have any context of the error, so it will be impossible to investigate. I've always used both npm and yarn, but yeah I guess I should read more about them and stick to one system. The problem I've had with yarn is that it consumes a crazy amount of disk space after a while, but it is more convenient to use
This is a common discussion between npm & yarn
Because of how yarn handles packages, it's arguably more performant than npm, with a large cache as a tradeoff
If you run into performance issues, I would recommend running
yarn cache clean
which can take a few minutes, but optimizies your global package cache
A note from the Yarn site:
Stores each dependency in node_modules, unlike pnpm, which flattens the dependency tree. This can lead to the faster installation of new packages and more disk space. Depending on your use case, this may not be beneficial. (However, Yarn introduced an option to use a single dependency per project in version 1.0, mitigating this issue).
Star
Discord
online
Get dedicated engineering support directly from the Payload team.