I get Hydration error when trying to run for first time the ecommerce template

[craggy talon]

it happens when I try to enter to the /admin route
Any help?

What I can do?
I'm new in payload

[glad nexus]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• SEO Plugin - Examples
• Production Deployment - Database
• Customizing Views - Building Custom Views - View Templates
• Building Your Own Plugin - Plugin Template
• The Payload Config - Config Options

[vernal halo]

Hey @craggy talon can you confirm the steps that led you here? Is this a fresh app from npx create-payload-app -t ecommerce?

[craggy talon]

Yeah I make a fresh ecommerce website, then try to go to the /admin section, and I get the error

I was having these error too:
https://github.com/payloadcms/payload/issues/16037#issuecomment-4109244947

In these file:

but I get to the solution thanks to the github post

I just comment these line and all goes ok

But I don't know how to solve the hydratation error, maybe the error happen becouse I comment that line?

[vernal halo]

did you try stopping and starting your dev server again after making that fix for the error above?

[craggy talon]

yep the problem still persist

[vernal halo]

let me try to reproduce this and I'll report back, hold tight!

have you made any changes to your repo? I just started a new app, created my first user, and logged in and I'm not seeing the hydration warning

[craggy talon]

Mmmmmmmmmmmmm so strange i don't make any other change i use pnpm dev

And run the database in docker

Using postgress not MongoDB

Can You tell me which steps do You make?

You Even don't have the import vars error?

[vernal halo]

nope, I have PG and Mongo installed locally so I don't use docker

but I tested it specifically with mongodb, though that should not be the culprit

[craggy talon]

I'm going to tell you the exact steps that I made:

1._ Use the cli to initialice the ecommerce template
2._Create a docker-compose.yml file following the docs:

version: '3'

services:
  payload:
    image: node:24-alpine
    ports:
      - '3000:3000'
    volumes:
      - .:/home/node/app
      - node_modules:/home/node/app/node_modules
    working_dir: /home/node/app/
    command: sh -c "corepack enable && corepack prepare pnpm@latest --activate && pnpm install && pnpm dev"
    depends_on:
      # mongo
      - postgres
    env_file:
      - .env
    environment:
      - DATABASE_URL=postgres://${DB_USER}:${DB_PASSWORD}@postgres:5432/${DB_NAME}

  # Ensure your DATABASE_URL uses 'mongo' as the hostname ie. mongodb://mongo/my-db-name
  # mongo:
  #   image: mongo:latest
  #   ports:
  #     - '27017:27017'
  #   command:
  #     - --storageEngine=wiredTiger
  #   volumes:
  #     - data:/data/db
  #   logging:
  #     driver: none

  # Uncomment the following to use postgres
  postgres:
    restart: always
    environment:
      - POSTGRES_USER=${DB_USER}
      - POSTGRES_PASSWORD=${DB_PASSWORD}
      - POSTGRES_DB=${DB_NAME}
    image: postgres:latest
    volumes:
      - pgdata:/var/lib/postgresql/data
    ports:
      - "5432:5432"

volumes:
  # data:
  pgdata:
  node_modules:

this is my .env:

PAYLOAD_SECRET=49e0bcca83642c6c84e3279b
DB_USER=postgres
DB_PASSWORD=password
DB_NAME=ecommerce
DATABASE_URL=postgres://postgres:password@127.0.0.1:5432/ecommerce
COMPANY_NAME="Payload Inc."
TWITTER_CREATOR="@payloadcms"
TWITTER_SITE="https://nextjs.org/commerce"
SITE_NAME="Payload Commerce"
PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000
NEXT_PUBLIC_SERVER_URL=http://localhost:3000
# Used to preview drafts
PREVIEW_SECRET=demo-draft-secret
# Stripe API keys
STRIPE_SECRET_KEY=sk_test_
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_
STRIPE_WEBHOOKS_SIGNING_SECRET=whsec_
# Added by Payload

I only use docker to run postgress
I run the app using pnpm run dev

The first error that I have when use pnpm run dev is:

[craggy talon]

I want to know how you avoid the @import "vars" error 🥲

[graceful herald]

Ah, are you working on a Windows machine?

This only happens when I run payload on my windows machines

No error on mac/linux

In your custom components, you have a BeforeDashboard that does an @import '~@payloadcms/ui/...' in the scss

Removing that import should fix it for you.

But keep in mind, if you have other components that do this, they'll need to be updated to remove that import as well.

In general, Next 16.2 changed something, so you may have luck downgrading to next 15.5.x where this issue does not occur at all

[vernal halo]

THANKS SAID 🙌

[graceful herald]

MY PLEASURE SEAN 🏄‍♂️

[craggy talon]

Yeah that was happening in my windows machine!

[craggy talon]

Yeah commenting that lines fix the problem

[craggy talon]

but now I have these other problem

Any solution ?
@graceful herald