payloadcms / next-payload-demo Goto Github PK

Hey,

I've not used Amazon S3 before so I'm just trying to get to grips with it. I've deployed this repo to a Vercel account and can access it, log in, etc.

However, when I upload something to the Media section, the file appears to upload but the actual image is missing. I can also see when refreshing my S3 bucket that no files are being uploaded.

It's creating the file structure correctly if I view the source:
https://s3.eu-west-2.amazonaws.com/my-s3-bucket/9029b33821838ae5857867291cc051b2-1.jpg

So I think I have something misconfigured, but I'm not sure what and testing this is a bit of a pain as I have to keep redeploying to test anything out.

My .env file looks like this (I've faked out the data but it's more or less the same):

MONGODB_URI=mongodb+srv://xxxxxx:[email protected]/admin?tls=true&authSource=admin&replicaSet=db-mongodb-lon1-54217
PAYLOAD_SECRET=MY_PAYLOAD_SECRET
PAYLOAD_CONFIG_PATH=dist/payload.config.js
NEXT_PUBLIC_APP_URL=http://localhost:3000
PAYLOAD_PUBLIC_CMS_URL=http://localhost:3000
S3_ACCESS_KEY_ID=XXXXYYYYZZZZZ
S3_SECRET_ACCESS_KEY=fAKeAc+Ce55k3y
S3_REGION="Europe (London) eu-west-2"
NEXT_PUBLIC_S3_ENDPOINT="https://s3.eu-west-2.amazonaws.com"
NEXT_PUBLIC_S3_BUCKET="my-s3-bucket"
PAYLOAD_PRIVATE_REGENERATION_SECRET=MY_PAYLOAD_SECRET
NEXT_PRIVATE_REGENERATION_SECRET=MY_PAYLOAD_SECRET
ANALYZE=false

My S3 access key ID and secret I set up in the security credentials section on AWS (https://us-east-1.console.aws.amazon.com/iam/home#/security_credentials)

I can see here that the "Access key last used" is still "none"

Am I missing something here?

Deployed to Vercel as a test and we have an issue with the payload package. Any idea why?

Hi, we've been trying to deploy this application to AWS Lambda using SST, and this has been mostly successful. However, whilst most API routes seem to return the correct data (e.g. /api/users/me and /api/users/init), the create-first-user and login routes don't seem to return any data. They always return 200 with no payload.

This leads to the behaviour that creating the first user silently works (it adds it to the database) but then nothing happens on the front-end. Similarly, logging in seems to authenticate (checking the lambda logs, it does show failures correctly) but nothing happens on the front-end. The button just goes back to being clickable, and 200 no content is returned by the POST /api/users/login.

Are the payload client calls using fetch under the hood so that they are cached especially for dynamic sites?

As far as I understood it they payload client methods are directly using the mongodb api without fetch in-between correct?

What would be the best implementation to implement the vercel/next.js fetch? https://nextjs.org/docs/app/building-your-application/data-fetching/caching#react-cache
Seems like getPayload is imported from payload package directly and I guess you don't want to have next.js specifiy code in this package. So maybe it would be nice to add a getPayload payload function to next-payload package which is using getPayload from payload package but wraps every cacheable function (like find/findMany) in a cache function?

The cold start performance makes payload unusable in the edge, 6-7 seconds to initial load 🤯. Any way the cold start times will be coming down in the future?

What?

Sometimes when editing a page's layouts the layouts seemingly disappear (see video below).

https://cdn.discordapp.com/attachments/1148881416684326952/1149252601561501717/dashboard_-_Grnn_Vekst_-_Google_Chrome_2023-09-05_13-53-11.mp4

Why?

It turns out that for some reason the mongodb database changes the layout type from an array of objects to an object of objects. This seems to be the reason for all the errors:

"testing three" works fine since it's an array of objects

"testing four" has been edited after its initial creation, and therefore does not show the layouts, which in the db is an object of objects.

After adding another layout to "testing three" the db objects look like this:

Steps to reproduce

1. Download the next-payload-demo repo: https://github.com/payloadcms/next-payload-demo/tree/61597476e18cd920001fcca95b7fd7b45b374480
2. run

yarn install
pnpm import

3. delete yarn.lock
4. add the following dependencies to package.lock

    "snappy": "^7.2.2",
    "aws-crt": "^1.18.0",
    "aws4": "^1.12.0",
    "bson-ext": "^4.0.3",
    "kerberos": "^2.0.1",
    "lucide-react": "^0.268.0",
    "mongodb": "^5.7.0",
    "mongodb-client-encryption": "^2.9.0",
    "mongoose": "^7.4.3"

5. run

pnpm install
pnpm dev

6. follow the steps in the video at the top of this thread to add a new page with a content layout, edit the page and add more layouts/blocks.

7. After having done all of this you can safely hard reset to the main branch's latest commit and the issue should still occur: git reset --hard 61597476e18cd920001fcca95b7fd7b45b374480

More info

• Deleting the .next folder seemingly has no effect
• This console message shows up when creating or updating a page [10:19:05] INFO (payload): Error hitting regeneration route for '/testing-six'. testing-six here is the slug of the edited page.
• This happens both for yarn and pnpm

Full debugging thread on discord: https://discord.com/channels/967097582721572934/1148881416684326952

I noticed things were a bit slow so I checked out the console and saw this:

API resolved without sending a response for /api/_preferences/collapsed-Collections-groups, this may result in stalled requests.
API resolved without sending a response for /api/_preferences/collapsed-Globals-groups, this may result in stalled requests.
API resolved without sending a response for /api/users/init, this may result in stalled requests.
API resolved without sending a response for /api/users/me, this may result in stalled requests.

Any idea what's up here? /api/users seems global, while /api/_preferences/ is in the admin only.

I'd love to see if we could make this work https://github.com/t3-oss/create-t3-turbo

Is there a reason to why this template still uses the pages directory for the api endpoints? Just curious. :)

I get this error when trying to access /admin. Just cloned it & installed with npm install. It says it's a problem with react-helmet.

Hi,

I am working with a next and payload app just like the repo. Now I want to deploy with docker in my server.

Here is docker-compose.yml

version: "3"
services:
  next-payload-demo:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3600:3000"
    depends_on:
      - mongo
    environment:
       MONGODB_URI: mongodb://mongo:27017/next-payload-demo
    env_file:
      - .env
    networks:
      - app_network
    command: sh -c "echo $MONGODB_URI"

  mongo:
    image: mongo
    restart: always
    environment:
      - MONGO_INITDB_DATABASE=next-payload-demo
    env_file:
      - .env
    volumes:
      - mongodata:/data/db
    networks:
      - app_network

volumes:
  mongodata:

networks:
  app_network:

Here is Dockerfile

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN yarn build

# If using npm comment out above and use below instead
# RUN npm run build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000
# set hostname to localhost
ENV HOSTNAME "0.0.0.0"

CMD ["node", "server.js"]

However it gave me errors while I run docker compose build

=> ERROR [next-payload-demo2 builder 4/4] RUN yarn build                                                                                             37.6s 
------                                                                                                                                                      
 > [next-payload-demo2 builder 4/4] RUN yarn build:                                                                                                         
0.284 yarn run v1.22.19                                                                                                                                     
0.304 $ yarn build:next
0.459 $ next build
0.727 - info Loaded env from /app/.env
1.610 - warn You have enabled experimental feature (outputFileTracingExcludes) in next.config.js.
1.610 - warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
1.610 
1.622 Attention: Next.js now collects completely anonymous telemetry regarding usage.
1.622 This information is used to shape Next.js' roadmap and prioritize features.
1.622 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
1.622 https://nextjs.org/telemetry
1.622 
1.681 - info Creating an optimized production build...
37.22 Failed to compile.
37.22 
37.22 ./pages/api/[collection]/versions/[id].ts
37.22 Module not found: Can't resolve '@payloadcms/next-payload/dist/handlers/[collection]/versions/[id]'
37.22 
37.22 https://nextjs.org/docs/messages/module-not-found
37.22 
37.22 ./pages/api/[collection]/versions/index.ts
37.22 Module not found: Can't resolve '@payloadcms/next-payload/dist/handlers/[collection]/versions'
37.22 
37.22 https://nextjs.org/docs/messages/module-not-found
37.22 
37.22 ./pages/api/globals/[global]/versions/[id].ts
37.22 Module not found: Can't resolve '@payloadcms/next-payload/dist/handlers/globals/[global]/versions/[id]'
37.22 
37.22 https://nextjs.org/docs/messages/module-not-found
37.22 
37.22 ./pages/api/globals/[global]/versions/index.ts
37.22 Module not found: Can't resolve '@payloadcms/next-payload/dist/handlers/globals/[global]/versions'
37.22 
37.22 https://nextjs.org/docs/messages/module-not-found
37.22 
37.23 
37.23 > Build failed because of webpack errors
37.34 error Command failed with exit code 1.
37.34 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
37.36 error Command failed with exit code 1.
37.36 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
------
failed to solve: process "/bin/sh -c yarn build" did not complete successfully: exit code: 1

I don't exactly know what's the issue.
Are my config files incorrect?

Have it all setup & running fine, but when trying to fetch from http://localhost:5175, I get:
Access to fetch at 'http://localhost:3000/api/pages/1?locale=en&depth=1' from origin 'http://localhost:5175' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

cors: ['http://localhost:5175'].filter(Boolean), csrf: ['http://localhost:5175'].filter(Boolean),

are added to payload.config, but no effect.

Any ideas? Thx!

app-index.js:31 Warning: ToastContainer: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
at ToastContainer (webpack-internal:///(app-pages-browser)/./node_modules/react-toastify/dist/react-toastify.esm.js:1044:28)
at Root (webpack-internal:///(app-pages-browser)/./node_modules/payload/dist/admin/Root.js:37:19)
at PayloadAdmin (webpack-internal:///(app-pages-browser)/./app/(payload)/admin/page.tsx:12:80)
at StaticGenerationSearchParamsBailoutProvider (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/static-generation-searchparams-bailout-provider.js:15:11)
at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:241:11)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:338:11)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9)
at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11)
at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:11)
at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:241:11)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:338:11)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9)
at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11)
at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:11)
at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:241:11)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:338:11)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9)
at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11)
at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:11)
at body
at html
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:294:11)
at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:157:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:440:13)
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:126:11)
at RSCComponent
at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:142:11)
window.console.error @ app-index.js:31
console.error @ hydration-error-info.js:45
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
validateFunctionComponentInDev @ react-dom.development.js:15883
mountIndeterminateComponent @ react-dom.development.js:15842
beginWork$1 @ react-dom.development.js:17354
beginWork @ react-dom.development.js:25711
performUnitOfWork @ react-dom.development.js:24557
workLoopSync @ react-dom.development.js:24273
renderRootSync @ react-dom.development.js:24228
performConcurrentWorkOnRoot @ react-dom.development.js:23360
workLoop @ scheduler.development.js:261
flushWork @ scheduler.development.js:230
performWorkUntilDeadline @ scheduler.development.js:534
app-index.js:31 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.

Please update the following components: SideEffect(NullComponent)