payloadcms / nextjs-custom-server Goto Github PK
View Code? Open in Web Editor NEWA TypeScript boilerplate for combining Payload and Next.js into a single Express server
A TypeScript boilerplate for combining Payload and Next.js into a single Express server
Following installation steps and then creating a page in the default Pages collection, an error occurs when visiting that page at localhost:3000/test-page:
CastError: Cast to string failed for value "[ 'test-page' ]" (type Array) at path "slug" for model "pages"
A similar error appears in the console when in the admin panel, this one for the 'favicon.ico' file:
CastError: Cast to string failed for value "[ 'favicon.ico' ]" (type Array) at path "slug" for model "pages"
I have not run into this before when using Payload from scratch with Javascript, so I wonder if this may be caused by a clash between the Typescript and Mongoose 'type' declarations. Some quick research led me to the 'typeKey' option for Mongoose schemas. I don't know enough about Mongoose schemas or how Payload handles them to explore a fix for this.
.env
variables.TypeError: children.map is not a function
18 | }
19 |
> 20 | const serialize = (children: Children): React.ReactElement[] => children.map((node, i) => {
| ^
21 | if (Text.isText(node)) {
22 | let text = <span dangerouslySetInnerHTML={{ __html: escapeHTML(node.text) }} />;
23 |
First of all, thanks to the payload team for such an amazing product. I am in love with PayloadCMS and its great and simple design.
While realizing the nature of Open Source projects, and the amount of work that such a project like Payload CMS might entailed, I do wonder how can it be that, a repository that is on the PayloadCMS project / github, can have the amount of errors I have encountered just trying to make it run.
Is there a working/actual/current version or template to use the amazing PayloadCMS with NextJS? This repo has been painful beyond belief ๐ ๐คฃ
If there isn't, where can one contribute such a thing? After picking my head resolving package dependencies, eslint weird decisions, etc...I think I have somehow a working, non opinionated version of this, very chaotic I am afraid, but at least dependency wise working.
Let me know if thatmight be interesting to the team!
CC: @jmikrut @denolfe
Nicolas.
Hello, I am facing an issue when serving the built project if I use custom views.
I reproduced the problem on a empty project by adding this custom view to the List view of Page
collection.
The error (after build):
yarn run v1.22.19
$ cross-env NODE_ENV=production PAYLOAD_CONFIG_PATH=dist/payload.config.js node dist/server.js
[10:01:54] INFO (payload): Connected to Mongo server successfully!
[10:01:54] INFO (payload): Starting Payload...
unhandledRejection Error: Cannot find module '../components/CustomMinimalView'
Require stack:
- /nextjs-custom-server-master/dist/collections/Page.js
- /nextjs-custom-server-master/dist/payload.config.js
- /nextjs-custom-server-master/node_modules/payload/dist/config/load.js
- /nextjs-custom-server-master/node_modules/payload/dist/payload.js
- /nextjs-custom-server-master/node_modules/payload/dist/initHTTP.js
- /nextjs-custom-server-master/node_modules/payload/dist/index.js
- /nextjs-custom-server-master/dist/server.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:985:15)
at Function.mod._resolveFilename (/nextjs-custom-server-master/node_modules/next/dist/build/webpack/require-hook.js:23:32)
at Function.Module._load (node:internal/modules/cjs/loader:833:27)
at Module.require (node:internal/modules/cjs/loader:1057:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (/nextjs-custom-server-master/dist/collections/Page.js:11:43)
at Module._compile (node:internal/modules/cjs/loader:1155:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
at Module.load (node:internal/modules/cjs/loader:1033:32)
at Function.Module._load (node:internal/modules/cjs/loader:868:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/nextjs-custom-server-master/dist/collections/Page.js',
'/nextjs-custom-server-master/dist/payload.config.js',
'/nextjs-custom-server-master/node_modules/payload/dist/config/load.js',
'/nextjs-custom-server-master/node_modules/payload/dist/payload.js',
'/nextjs-custom-server-master/node_modules/payload/dist/initHTTP.js',
'/nextjs-custom-server-master/node_modules/payload/dist/index.js',
'/nextjs-custom-server-master/dist/server.js'
]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Next and Payload are currently on different versions of Sharp, this breaks the next/image component when you try to use it.
Downgrade Payload Sharp to a compatible version, 0.26.3 and 0.26.3 worked when tested, 0.26.3 and 0.27.0 did also work. Not sure what to make of that.
server.listen() waits for the server to be ready, but this means that the browser shows the connection refused error. The server should instead listen immediately and hang until the server is ready. (as payload & next support already afaik)
nextjs-custom-server/server.ts
Line 30 in a67efef
When using getStaticPaths
in Next.js, the payload is not finding the collection. However, getStaticProps
is working as expected.
getStaticPaths
to generate static paths for the collectionor
/
The payload for the collection should be accessible when using getStaticPaths
.
The payload is not finding the collection when using getStaticPaths
and gives following error:
error - Error [APIError]: The collection with slug news can't be found.
at new ExtendableError (/Users/max/progg/mediaatrium/nextjs-custom-server/node_modules/payload/dist/errors/APIError.js:22:15)
at new APIError (/Users/max/progg/mediaatrium/nextjs-custom-server/node_modules/payload/dist/errors/APIError.js:38:9)
at findLocal (/Users/max/progg/mediaatrium/nextjs-custom-server/node_modules/payload/dist/collections/operations/local/find.js:16:15)
at BasePayload.find (/Users/max/progg/mediaatrium/nextjs-custom-server/node_modules/payload/dist/payload.js:53:20)
at getStaticPaths (webpack-internal:///./pages/news/[title].tsx:14:72)
at Object.buildStaticPaths (/Users/max/progg/mediaatrium/nextjs-custom-server/node_modules/next/dist/build/utils.js:610:39)
at Object.loadStaticPaths (/Users/max/progg/mediaatrium/nextjs-custom-server/node_modules/next/dist/server/dev/static-paths-worker.js:64:24)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'APIError',
status: 500,
data: null,
isPublic: false,
isOperational: true,
page: '/news/test'
}
I'm getting the following warning when switching over to the new app
directory:
Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
Any ideas on what could be causing this?
The NextJS docs actually advice to use getStaticProps in combination with a Headless CMS, such as payload.
However this would need some sort of deploy hook to rebuild the NextJS project when saving a collection. I tried to run a nextBuild()
in a CollectionAfterChangeHook
, but webpack refused to compile.
You mentioned in the README there will be more boilerplates coming, also for static sites. I guess that would help me. Is there any update on when we can expect these?
Hi, trying to use the example provided, I'm facing the issue when clicking on add new block, and then on content.
Uncaught Error: [Slate] editor is invalid! you passed:{"children":[],"operations":[],"selection":null,"marks":null,"history":{"undos":[],"redos":[]}}
I cloned a clean copy of this repo and followed the instructions. When building this example for production I run into this same import issue. I have tried it using yarn and npm:
npm run build
> [email protected] build
> cross-env NODE_ENV=production yarn build:payload && yarn build:server && cross-env NEXT_BUILD=true node dist/index.js
yarn run v1.22.19
$ payload build
Done in 11.19s.
yarn run v1.22.19
$ tsc --project tsconfig.server.json
Done in 1.71s.
[16:32:09] INFO (payload): Connected to Mongo server successfully!
[16:32:09] INFO (payload): Starting Payload...
/home/kaleb/code/nextjs-custom-server/payload.config.ts:1
import { buildConfig } from 'payload/config';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1033:15)
at Module._compile (node:internal/modules/cjs/loader:1069:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at loadConfig (/home/kaleb/code/nextjs-custom-server/node_modules/payload/dist/config/load.js:21:18)
at BasePayload.init (/home/kaleb/code/nextjs-custom-server/node_modules/payload/dist/payload.js:200:27)
Rolling back one commit (7697c07) successfully builds.
npm run build
> [email protected] build
> cross-env NODE_ENV=production yarn build:payload && yarn build:server && cross-env NEXT_BUILD=true node dist/index.js
yarn run v1.22.19
$ payload build
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Done in 14.36s.
yarn run v1.22.19
$ tsc --project tsconfig.server.json
Done in 1.72s.
[16:40:12] INFO (payload): Starting Payload...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
NextJS is now building...
info - Loaded env from /home/kaleb/code/nextjs-custom-server/.env
[16:40:13] INFO (payload): Connected to Mongo server successfully!
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
info - Checking validity of types
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
warn - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
./components/RenderBlocks/index.tsx
18:29 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any
./components/RichText/index.tsx
4:56 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
info - Creating an optimized production build ..webpack built 22e695c0315a2c593476 in 12238ms
webpack compiled successfully
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (1/1)
info - Finalizing page optimization
Page Size First Load JS
โ ฮป / 257 B 108 kB
โ /_app 0 B 74.9 kB
โ ฮป /[...slug] 205 B 108 kB
โ โ /404 304 B 75.2 kB
+ First Load JS shared by all 74.9 kB
โ chunks/framework-332b5ae52c2b3ebe.js 45 kB
โ chunks/main-513e1be867958890.js 28.6 kB
โ chunks/pages/_app-111b1fc4a041b4fc.js 499 B
โ chunks/webpack-a5a2c4a385dd3960.js 769 B
โ css/d1719792463ae015.css 286 B
ฮป (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
โ (Static) automatically rendered as static HTML (uses no initial props)
npm: 8.11.0
node: v16.15.1
WSL2 / Ubuntu 20.04.5 LTS
(Note: I created this issue here because I believe it is future relevant.)
After migrating to the new app
folder structure (https://beta.nextjs.org/docs), I got an error when importing payload.
Error: Module not found: Can't resolve 'uglify-js'
The error seems to be a common issue in webpack 5:
https://stackoverflow.com/questions/71013802/webpack-5-error-cant-resolve-uglify-js-swc-core-esbuild
However, I am too unfamiliar with webpack and next to be able to apply this to the next config.
I would appreciate any further pointers!
Server listening on http://localhost:3000...
webpack built e11124fb4dbe18743a2c in 8126ms
ERROR in ./node_modules/next/dist/compiled/micromatch/index.js 22:3471-3486
Module not found: Error: Can't resolve 'util' in '.../node_modules/next/dist/compiled/micromatch'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
webpack compiled with 1 error
Solution is:
admin: {
webpack: (x) => {
const config = x;
if (!config.resolve)config.resolve = {};
if (!config.resolve)config.resolve.fallback = {};
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
config.resolve.fallback.util = false;
return config;
},
},
Hi, trying to use the example provided, I'm facing the issue when clicking on add new block, and then on content.
Uncaught Error: [Slate] editor is invalid! you passed:{"children":[],"operations":[],"selection":null,"marks":null,"history":{"undos":[],"redos":[]}}
I'm using:
NodeJS - 16.16.0
NPM - 8.11.0
package.json:
"dependencies": {
"@babel/plugin-proposal-do-expressions": "^7.18.6",
"@babel/register": "^7.17.0",
"@payloadcms/plugin-seo": "^1.0.6",
"dotenv": "^16.0.0",
"escape-html": "^1.0.3",
"express": "^4.18.0",
"next": "^12.1.0",
"payload": "^1.0.7",
"react": "^18.1.0",
"sass": "^1.52.0",
"slate": "^0.81.0",
"typescript": "^4.7.0",
"util": "^0.12.4"
},
"devDependencies": {
"@trbl/eslint-config": "^1.2.4",
"@types/express": "^4.17.11",
"@types/react": "^16.9.56",
"@typescript-eslint/eslint-plugin": "4.0.1",
"@typescript-eslint/parser": "4.0.1",
"cross-env": "^7.0.3",
"eslint": "^7.11.0",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jest": "^23.16.0",
"eslint-plugin-jest-dom": "^3.0.1",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-react": "^7.18.0",
"eslint-plugin-react-hooks": "^2.3.0",
"ts-node": "^10.8.0"
}
I noticed, that this line causes an error when opening the admin interface, somehow the left side is resolved as the string, so after the tranpilation the resulting code is something along the lines of this:
'http://localhost:3000' = process.env.SERVER_URL;
process.env.NEXT_PUBLIC_SERVER_URL = process.env.SERVER_URL;
which produces an error and a white page on localhost:3000/admin
Hi all,
Just wanna spin up and try next + payload cms for my blog... but I am having dependencies issue with jest.
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint-plugin-jest-dom
npm ERR! dev eslint-plugin-jest-dom@"^3.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-jest-dom@"^2.0.0" from @trbl/[email protected]
npm ERR! node_modules/@trbl/eslint-config
npm ERR! dev @trbl/eslint-config@"^1.2.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/user1/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/user1/.npm/_logs/2023-05-13T10_34_34_562Z-debug-0.log
Apologies in advance but I am still a beginning in web!
Many thanks :)
[08:30:35] ERROR (payload): MongoWriteConcernError: No write concern mode named 'majoritye' found in replica set configuration
at Connection.onMessage (/home/jatin-wsl/payloadcms/Payload-CMS-Learn/node_modules/mongodb/lib/cmap/connection.js:199:30)
at MessageStream. (/home/jatin-wsl/payloadcms/Payload-CMS-Learn/node_modules/mongodb/lib/cmap/connection.js:63:60)
at MessageStream.emit (node:events:513:28)
at MessageStream.emit (node:domain:489:12)
My computer: M1 Mac Mini on macOS 12.4
Steps to reproduce:
yarn
)yarn build
(or npm run build
)I had this issue earlier and thought it might've been some code I added so I did some more digging and eventually just cloned a fresh copy to try and still got this issue.
I considered maybe it was me using too new a node version (18) so I tried the latest of v16 and v14 but all ended the same.
I also ran into the issue below. Following their recommendation seemed to fix it. Something to be aware of though.
NODE_ENV will not work on Windows.
Error-Message: 'NODE_ENV' is not recognized as an internal or external command
Will compile without problems
Error-Message on compile
yarn add cross-env
"scripts": {
"build:next": "next build",
"build:server": "tsc --project tsconfig.server.json",
"build:payload": "payload build",
"build": "cross-env NODE_ENV=production yarn build:payload && yarn build:server && cross-env NEXT_BUILD=true node dist/index.js",
"dev": "node server/index.js",
"seed": "node seed/index.js",
"serve": "cross-env NODE_ENV=production node dist/index.js"
},
yarn install
yarn build
I've been using this template for a little bit without issues. Then, wanted to create a Post category to blog with. I've created a Collection and added the RichText field. When I attempt to visit the page in the admin panel I get a slew of errors and the screen goes white. If I refresh I can see the page attempting to load for a flash of a second then it goes white again. Doing a little research a few have said it's do to the useMemo function, some mention it's a race condition. Below is the Collection and the error. The error is with Slate. Hoping you might be able to shed some light on the subject. Thanks!!!
import { CollectionConfig } from "payload/types";
import titleToSlug from "../fields/titleToSlug";
const Post: CollectionConfig = {
slug: "posts",
fields: [
{
name: "title",
label: "Title",
type: "text",
required: true,
},
{
name: "summary",
label: "Summary",
type: "textarea",
},
{
name: "content",
label: "Content",
type: "richText",
required: true,
},
{
name: "published",
label: "Published",
type: "radio",
options: [
{
label: "No",
value: "no",
},
{
label: "Yes",
value: "yes",
},
],
defaultValue: "no",
},
{
name: "categories",
label: "Categories",
type: "relationship",
relationTo: "categories",
hasMany: true,
},
{
name: "tags",
label: "Tags",
type: "relationship",
relationTo: "tags",
hasMany: true,
},
titleToSlug,
],
};
export default Post;
------ Error message
index.es.js:3909 Uncaught Error: [Slate] editor is invalid! you passed:{"children":[],"operations":[],"selection":null,"marks":null,"history":{"undos":[],"redos":[]}}
at index.es.js:3909:1
at mountState (react-dom.development.js:16852:1)
at Object.useState (react-dom.development.js:17593:1)
at Object.useState (react.development.js:1620:1)
at Slate (index.es.js:3903:31)
at renderWithHooks (react-dom.development.js:16175:1)
at mountIndeterminateComponent (react-dom.development.js:20913:1)
at beginWork (react-dom.development.js:22416:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
I want to host this on ec2 but I am not able to host it properly. Can you help me with that.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.