react-datepicker.css loading on using getPayloadHMR

[gujral1997]

Link to reproduction

None

Payload Version

3.0.0-beta.67

Node Version

v20.9.0

Next.js Version

15.0.0-canary.58

Describe the Bug

React Datepicker CSS is weirdly loading on using getPayloadHMR The CSS doesn't load if I remove getPayloadHMR from the code. I have attached the code

page.tsx:

import { getPayloadHMR } from '@payloadcms/next/utilities'
import configPromise from '@payload-config'

export default async function Page() {

  const payload = await getPayloadHMR({ config: configPromise })

  return <div>Home Page</div>
}

payload.config.ts

// storage-adapter-import-placeholder
import { mongooseAdapter } from '@payloadcms/db-mongodb'
import {
  BlocksFeature,
  BoldFeature,
  FixedToolbarFeature,
  HeadingFeature,
  HorizontalRuleFeature,
  InlineToolbarFeature,
  ItalicFeature,
  LinkFeature,
  OrderedListFeature,
  UnorderedListFeature,
  UnderlineFeature,
  lexicalEditor,
} from '@payloadcms/richtext-lexical'
import { nestedDocsPlugin } from '@payloadcms/plugin-nested-docs'
import path from 'path'
import { buildConfig } from 'payload'
import { fileURLToPath } from 'url'
import sharp from 'sharp'

import { Users } from './payload/collections/Users'
import { Media } from './payload/collections/Media'
import { Categories } from './payload/collections/Categories'
import { GenerateTitle, GenerateURL } from '@payloadcms/plugin-seo/types'
import { Page, Post } from './payload-types'
import { seoPlugin } from '@payloadcms/plugin-seo'
import { Posts } from './payload/collections/Posts'
import { Header } from './payload/globals/Header/Header'
import { Footer } from './payload/globals/Footer/Footer'
import { Pages } from './payload/collections/Pages'
import { MediaBlock } from './payload/blocks/MediaBlock'
import { Home } from './payload/globals/HomePage'
import { FAQs } from './payload/collections/FAQs'

const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

const generateTitle: GenerateTitle<Post | Page> = ({ doc }) => {
  return doc?.title ? `${doc.title} | Payload Website Template` : 'Payload Website Template'
}

const generateURL: GenerateURL<Post | Page> = ({ doc }) => {
  return doc?.slug
    ? `${process.env.NEXT_PUBLIC_SERVER_URL}/${doc.slug}`
    : (process.env.NEXT_PUBLIC_SERVER_URL as string)
}

export default buildConfig({
  admin: {
    user: Users.slug,
  },
  collections: [Users, Media, Categories, Posts, Pages, FAQs],
  cors: [process.env.PAYLOAD_PUBLIC_SERVER_URL || ''].filter(Boolean),
  csrf: [process.env.PAYLOAD_PUBLIC_SERVER_URL || ''].filter(Boolean),
  editor: lexicalEditor({
    features: ({ rootFeatures }) => {
      return [
        ...rootFeatures,
        OrderedListFeature(),
        UnorderedListFeature(),
        UnderlineFeature(),
        BoldFeature(),
        ItalicFeature(),
        HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
        BlocksFeature({ blocks: [MediaBlock] }),
        FixedToolbarFeature(),
        InlineToolbarFeature(),
        HorizontalRuleFeature(),
        LinkFeature({
          //   enabledCollections: ['pages', 'posts', 'categories'],
          fields: ({ defaultFields }) => {
            const defaultFieldsWithoutUrl = defaultFields.filter((field) => {
              if ('name' in field && field.name === 'url') return false
              return true
            })

            return [
              ...defaultFieldsWithoutUrl,
              {
                name: 'url',
                type: 'text',
                admin: {
                  condition: ({ linkType }) => linkType !== 'internal',
                },
                label: ({ t }) => t('fields:enterURL'),
                required: true,
              },
            ]
          },
        }),
      ]
    },
  }),
  secret: process.env.PAYLOAD_SECRET || '',
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
  db: mongooseAdapter({
    url: process.env.DATABASE_URI || '',
  }),
  sharp,
  globals: [Header, Footer, Home],
  plugins: [
    nestedDocsPlugin({
      collections: ['categories'],
    }),
    seoPlugin({
      generateTitle,
      generateURL,
    }),
  ],
})

Also attaching a screenshot describing the issue:

Reproduction Steps

1. npx create-next-app@latest project-name
2. Select empty template
3. Add the above page.tsx inside app/page.tsx
4. Copy payload config
5. yarn dev

Adapters and Plugins

No response

[jmikrut]

Hey @gujral1997 — this is actually known and is tracked on the Next.js repo:

vercel/next.js#50285

We have a PR open against Next.js that addresses this, but we're working on a backup plan right now that would also fix the issue:

#6938

I'd like to consolidate discussions to either the Next.js issue, or the Payload discussion linked above so keep everything in one place - but this will be resolved shortly one way or another!

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.