payloadcms / nextjs-custom-server Goto Github PK

View Code? Open in Web Editor NEW

185.0 8.0 57.0 4.83 MB

A TypeScript boilerplate for combining Payload and Next.js into a single Express server

JavaScript 8.78% TypeScript 81.94% CSS 9.28%

nextjs-boilerplate payload payloadcms

nextjs-custom-server's People

Contributors

Stargazers

Watchers

nextjs-custom-server's Issues

Mongoose Cast Error: Cast to string failed on dev server

Issue

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"

Possible Solution

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.

Steps to reproduce

Clone repo.
Set up .env variables.
yarn
yarn dev
Create user
Open admin panel (this is where the favicon error first appears).
Create new page in Pages collection with slug 'test-page'.
Go to localhost:3000/test-page
Cast error

Details

Payload versions 0.13.2 and 0.15.2 tested with similar errors.
Serverless instance of MongoDB Atlas.
Screenshot of error below

TypeError: children.map is not a function

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 |

Is there a working version of a template to use Nextjs and PayloadCMS?

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.

Error on build with custom view

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.

Sharp version clash between Next and Payload when using next/image

Bug Report

Next and Payload are currently on different versions of Sharp, this breaks the next/image component when you try to use it.

Possible Solution

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.

Steps to Reproduce

Checkout fix/next-image-incompatibility
Make sure Payload is updated
Yarn dev
Add image to the home page
Go to home page
Breaks

Details

both version 0.26.3 worked when tested
version 0.26.3 (next) and 0.27.0 also worked when tested
Below is screenshot of the error
.

Server listening is delayed

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

server.listen(process.env.PORT, async () => {

Payload not finding collection when using getStaticPaths

When using getStaticPaths in Next.js, the payload is not finding the collection. However, getStaticProps is working as expected.

Steps to reproduce

Define a collection in your Next.js project
Use getStaticPaths to generate static paths for the collection
Attempt to access the collection trough the Payload Local API

clone this respository
create some news
click on link from /

Expected behavior

The payload for the collection should be accessible when using getStaticPaths.

Actual behavior

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

` Detected multiple renderers` warning when upgrading to new `app` directory

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?

Implement GetStaticProps instead of GetServerSideProps

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?

Slate error

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":[]}}

No image on cloud

No image displayed on cloud deployment but images ok on local dev.

build cannot import buildConfig from payload

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

Error when upgrading to Next.js 13's new `app` directory

(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!

Upgrading dependencies results in webpack error

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;
    },
  },

Slate error

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

admin route results in blank page

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

Unable to resolve dependency tree

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 :)

Mongo config issue

[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)

Fresh install doesn't build

Problem:

My computer: M1 Mac Mini on macOS 12.4

Steps to reproduce:

Start a project with this template
Install dependencies (I used yarn)
yarn build (or npm run build)
Result above

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.

Compile will fail on Windows (10) - 'NODE_ENV' is not recognized

Bug Report

NODE_ENV will not work on Windows.
Error-Message: 'NODE_ENV' is not recognized as an internal or external command

Expected Behavior

Will compile without problems

Current Behavior

Error-Message on compile

Possible Solution

Add cross-env

yarn add cross-env

Update build / serve step

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

Steps to Reproduce

Clone repository on Windows 10
yarn install
yarn build

Detailed Description

yarn: 1.22.11

RichText field causes blank screen

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)

How do i hosy this on ec2

I want to host this on ec2 but I am not able to host it properly. Can you help me with that.

payloadcms / nextjs-custom-server Goto Github PK

nextjs-custom-server's People

Contributors

Stargazers

Watchers

Forkers

nextjs-custom-server's Issues

Issue

Possible Solution

Steps to reproduce

Details

Bug Report

Possible Solution

Steps to Reproduce

Details

Steps to reproduce

Expected behavior

Actual behavior

Bug Report

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce

Detailed Description

Recommend Projects

Recommend Topics

Recommend Org

Jobs