HMR does not work

[Murrock58]

Link to reproduction

npx create-payload-app

To Reproduce

Facing the issue on a basic installation generated by npx with minimal modifications to be functional

• PAYLOAD_URL=http://localhost:3000
• Cloud MongoDB connection

Describe the Bug

unreachable code after return statementindex.js:75 [HMR] connected client.js:96 [HMR] bundle rebuilding client.js:242 [HMR] connected client.js:96 [HMR] Checking for updates on the server... process-update.js:51 XHRGET http://localhost:3000/adminmain.85750bc05a2d3de174ba.hot-update.json [HTTP/1.1 404 Not Found 3ms]

[HMR] Cannot find update (Full reload needed) process-update.js:61 [HMR] (Probably because of restarting the server)

I am trying to experiment with Payload CMS and have started from a fresh installation after playing around on another installation. However, even on a fresh installation I'm notable to get the HMR to work. I merely have a new project with minimal configuration for it to be functional after a "npx create-payload-app".

The fact that there's "unreachable code after return statement" as first warning without anything on a fresh installation makes it hard to understand what I could have done wrong.

Payload Version

1.7.2

[jmikrut]

Hey @Murrock58 — I think this has to do with your PAYLOAD_URL. Note that the create-payload-app ships with http://localhost:3000 defined as its serverURL. Did you replace this with your own env variable?

What are you using the PAYLOAD_URL for? What have you changed with your config, exactly? Have you changed routes.admin or routes.api?

Note that if you are setting your Payload serverURL, you should be prefixing your URL with PAYLOAD_PUBLIC_ if you want it to work with the admin UI as well. Docs here.

We will likely need more information here in order to help but I don't think this is an issue with create-payload-app, or Payload. But we're happy to help you. It should be simple.

[Murrock58]

Hey @Murrock58 — I think this has to do with your PAYLOAD_URL. Note that the create-payload-app ships with http://localhost:3000 defined as its serverURL. Did you replace this with your own env variable?

What are you using the PAYLOAD_URL for? What have you changed with your config, exactly? Have you changed routes.admin or routes.api?

Note that if you are setting your Payload serverURL, you should be prefixing your URL with PAYLOAD_PUBLIC_ if you want it to work with the admin UI as well. Docs here.

We will likely need more information here in order to help but I don't think this is an issue with create-payload-app, or Payload. But we're happy to help you. It should be simple.

Thanks for the quick response!

I am testing locally, so I have kept PAYLOAD_URL=http://localhost:3000 My config is as below, though I have tested with removing the participants/pages, localization, plugins and rateLimit with the same issue.

import { buildConfig } from 'payload/config'; import seo from '@payloadcms/plugin-seo'; import path from 'path'; import Users from './collections/Users'; import Participants from './collections/Participants'; import Pages from './collections/Pages';

export default buildConfig({ serverURL: process.env.PAYLOAD_URL, admin: { user: Users.slug, }, collections: [ Users, Pages, Participants, // Add Collections here // Examples, ], rateLimit: { trustProxy: true, window: 2 60 1000, // 2 minutes max: 2400, // limit each IP per windowMs }, plugins: [ seo({ collections: ['pages', 'participants'], }), ], typescript: { outputFile: path.resolve(dirname, 'payload-types.ts'), }, graphQL: { schemaOutputFile: path.resolve(dirname, 'generated-schema.graphql'), }, localization: { defaultLocale: 'en', locales: ['en', 'fr'], }, });

[jmikrut]

Try and update your serverURL to use an environment variable prefixed accordingly as I mentioned. Instead of process.env.PAYLOAD_URL, it should be process.env.PAYLOAD_PUBLIC_URL. That way it will work in the admin UI as mentioned above. Give that a shot.

[Murrock58]

I have changed my env to have PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000 and also serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL, and the issue is the same.

Also tried with PAYLOAD_PUBLIC_URL, same issue.

I have tried on node 18.12.1 and 14.15.3 if that matters.

[jmikrut]

Oh wait, I know what this is. My apologies for the misleading questions.

So, right now, you are probably trying to edit core Payload config files. Because the Payload config is used on the server and in the browser, if you make a change to any .ts file, our default nodemon actually restarts the entire Node server, which will break HMR.

But, if you edit .tsx files, or .scss, or similar, then HMR will work. Being that you are probably trying to edit collections to see your changes show up via HMR, this is actually expected behavior.

However, we've got a PR open that will enable server hot module reloading as well, which will be a huge quality of life improvement here. Right now though, HMR is only meant to work for actually building custom React components as those do not require server restarts.

Does that make sense? Again - not sure why I didn't think of this earlier!

[Murrock58]

Hehe, makes perfect sense! Thank you :)

[github-actions[bot]]

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