Do you have any ideas where I might start on fixing this issue? Feels like a Webpack issue, but I thought this kind of file processing was handled automatically by the next build process?

Happy to share access to the repo.

If I manually copy a few missing

*.scss

files into the respective folders within

/dist

, then the

yarn serve

moves on to the next missing scss file.

Tested this to sanity check that these files should actually be copied. Obviously I can't manually copy all of these missing scss files, so does anyone know how I might go about fixing this issue?

Looking into this further, I can see that next does indeed build the site correctly. I can run the build with

next start

and it loads the site with all styling in place. However nothing runs other than the 404 page....

So the problem seems to be coming from the build server script:

"build:server": "tsc --project tsconfig.server.json",

Which is what outputs to the

/dist

folder.

I'm really confused by what need to be done here.

Looking at your more recent examples… I can see the use of

copyfiles

script. I’ll try this and report back.

paulpopuslast year
Hey
@357456032454410240
ping me if you're still getting issues, happy to take a look at your repo
jakehopkinglast year
Thanks
@858693520012476436

I'm making progress, but I'm going to have to move to a
src/
structure for my project I think.
copyfiles
nor
rysnc
seems to be able follow hairy exclude rules of dirs/files when copying a list of file extensions.

Also, I use import alias rules for the front-end components e.g.
import { some } from '@components/some/dir'
which the custom
next:build
script doesn't like. It seems to need relative imports for eveything. I have done relative paths whenever I'm dealing payload specific files, but that's not enough anymore it seems.

Really really wish I'd have separated out the front-end and the cms into individual repos from the outset.

@858693520012476436
I have
files
and
media
folders which store uploaded files from the payload collections, should I move these into the
src
folder also?

@969226489549713438
what are your thoughts on how I should structure my folders going forward.

Currently everything lives in the parent directory like so:
```
.env
.eslintrc.js
.git/
.gitignore
.next/
.npmrc
.nvmrc
.prettierignore
.prettierrc
access/
assets/
blocks/
build/
collections/
components/
contexts/
css/
declarations/
declarations.d.ts
dev.ts
dist/
emails/
fields/
files/
globals/
hooks/
json/
lib/
media/
mocks/
next-env.d.ts
next.config.js
node_modules/
nodemon.json
package.json
pages/
payload.config.ts
public/
readme.md
routes/
scripts/
seed/
server.ts
stores/
stripe/
tokens/
tsconfig.json
tsconfig.server.json
utilities/
yarn.lock
```
I will move to a
/src
structure, however I'm not sure where the
media
and
files
folders should move to. The media folder has 1000s of images.

can/should payload write to root
/media, /files
folders outside of the
/src
folder? or should everything be moved into the
/src
folder (excluding the config files i.e tsconfig.json, packaga.json etc)?
paulpopuslast year
media/files usually sits in the gitroot

the
src
is usually for anything related to building the app (not just for payload but in general) which is then built to a
dist/
directory

you don't really want to copy thousands of files any time you build the app, it would take extra time, plus affect your system, disks etc. too much, so they sit in a shareable gitroot directory

https://github.com/payloadcms/website-cms/
this is a solid example of how your folder structure can be like
jakehopkinglast year
Thanks for that
@858693520012476436
. Makes a lot of sense... will update as suggested 👍

I've moved to
/src
and updated all imports to be relative.

I now have broken references to
/media*
and
/files*
within my front-end and payload admin. How can I fix this?

Console is littered with these 404s

upstream image response failed for http://10.0.1.236:3000/media/photos/

and my payload admin looks like this for media collections

@858693520012476436

@969226489549713438
suggestions please 🙏

I also guess I need to add a
staticDir
to the
upload
object within collections that have uploads, right?

or is that my answer? will try...

Indeed, I answered it myslelf. Thanks for being a rubber duck 🙂

I'll try again the builds later when I have more time.
paulpopuslast year
nice!

jakehopkinglast year

I can build, however I get this error when I try to serve:

[12:35:36] INFO (payload): Connected to MongoDB server successfully!
[12:35:36] INFO (payload): Starting Payload...
- info Loaded env from /Users/jake/Development/personal/elkli-and-hart/.env.production.local
- info Loaded env from /Users/jake/Development/personal/elkli-and-hart/.env
- warn You have enabled experimental feature (scrollRestoration) in next.config.js.
- warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

unhandledRejection Error: Could not find a production build in the '/Users/jake/Development/personal/elkli-and-hart/.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id
    at NextNodeServer.getBuildId (/Users/jake/Development/personal/elkli-and-hart/node_modules/next/dist/server/next-server.js:349:23)
    at new Server (/Users/jake/Development/personal/elkli-and-hart/node_modules/next/dist/server/base-server.js:152:29)
    at new NextNodeServer (/Users/jake/Development/personal/elkli-and-hart/node_modules/next/dist/server/next-server.js:173:9)
    at NextServer.createServer (/Users/jake/Development/personal/elkli-and-hart/node_modules/next/dist/server/next.js:179:24)
    at async /Users/jake/Development/personal/elkli-and-hart/node_modules/next/dist/server/next.js:200:31
    at async NextServer.prepare (/Users/jake/Development/personal/elkli-and-hart/node_modules/next/dist/server/next.js:161:24)
    at async start (/Users/jake/Development/personal/elkli-and-hart/dist/server.js:58:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Specifically the

Try building your app with 'next build' before starting the production server.

Should this not be part of the

next:build

script in package.json?

Due to my 404 page requiring access to the payload using fetch, running a regular

next build

returns an expected error:

- info Collecting page data
[    ] - info Generating static pages (0/1)
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async fetchCollection (/Users/jake/Development/personal/elkli-and-hart/.next/server/chunks/535.js:4982:22)
    at async Promise.all (index 0)
    at async MyApp.getInitialProps (/Users/jake/Development/personal/elkli-and-hart/.next/server/chunks/535.js:5248:71)
    at async loadGetInitialProps (/Users/jake/Development/personal/elkli-and-hart/node_modules/next/dist/shared/lib/utils.js:150:19)
    at async renderToHTMLImpl (/Users/jake/Development/personal/elkli-and-hart/node_modules/next/dist/server/render.js:426:13)
    at async /Users/jake/Development/personal/elkli-and-hart/node_modules/next/dist/export/worker.js:459:36
    at async Span.traceAsyncFn (/Users/jake/Development/personal/elkli-and-hart/node_modules/next/dist/trace/trace.js:103:20)
- info Generating static pages (1/1)

Looking in

server.js

I see the options being passed into the

nextBuild

function are (i've updated this from the example repo, because the previous version was missing required params, and throwing a type args error):

if (process.env.NEXT_BUILD) {
    server.listen(process.env.PORT, async () => {
      console.log('Next.js is now building...');
      await nextBuild(
        path.join(__dirname, ''), // dir
        false, // reactProductionProfiling
        true, // debugOutput
        false, // runLint
        false, // noMangling
        false, // appDirOnly
        false, // turboNextBuild
        null, // turboNextBuildRoot
        'default', // buildMode
      );
      process.exit();
    });
  } else {
...

What options should I be using here?

My scrips in package.json:

"scripts": {
    "build:next": "next build",
    "build:next:custom": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NEXT_BUILD=true node dist/server.js",
    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
    "build:server": "tsc --project tsconfig.server.json",
    "build": "cross-env NODE_ENV=production yarn build:payload && yarn build:server && yarn copyfiles && yarn build:next:custom",
    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
    "dev:basic": "cross-env NODE_ENV=development PAYLOAD_CONFIG_PATH=src/payload.config.ts ts-node src/dev.ts",
    "serve": "cross-env NODE_ENV=production PAYLOAD_CONFIG_PATH=dist/payload.config.js node dist/server.js",
  ...
  },

The output from

next:build:custom

is:

Route (pages)                              Size     First Load JS
┌   /_app                                  0 B             223 kB
└ λ /404                                   182 B           223 kB
+ First Load JS shared by all              298 kB
  ├ chunks/framework-d23a68e051eeb176.js   45.2 kB
  ├ chunks/main-7728b542b54be24a.js        28.6 kB
  ├ chunks/pages/_app-cda6d407303bf3de.js  149 kB
  ├ chunks/webpack-4c367c758ffd7408.js     722 B
  └ css/71bf26a48dc5ea11.css               74.4 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

Redirects

┌ source: /:path+/
├ destination: /:path+
└ permanent: true

┌ source: /checkout
├ destination: /basket/checkout
└ permanent: true

┌ source: /homepage
├ destination: /
└ permanent: true

┌ source: /collections/category
├ destination: /collections
└ permanent: true

┌ source: /essays/category
├ destination: /essays
└ permanent: true

┌ source: /journal/category
├ destination: /journal
└ permanent: true

┌ source: /products/category
├ destination: /products
└ permanent: true

┌ source: /email/order-confirmation
├ destination: /
└ permanent: true

Which is clearly wrong.... it's only generating the 404 page, and all of my other pages don't make the cut.

IF I run my dev server, I CAN then run

yarn next build

becuase the

fetch

will resolve.

When this runs, the generated output is correct:

- info Generating static pages (1/1)
- info Finalizing page optimization

Route (pages)                              Size     First Load JS
┌ λ /                                      528 B           253 kB
├   /_app                                  0 B             165 kB
├ λ /[...slug]                             515 B           253 kB
├ ● /404 (305 ms)                          413 B           211 kB
├   └ css/7a63699efed55fb2.css             3.06 kB
├ λ /api/convertkit/subscribe              0 B             165 kB
├ λ /basket                                3.54 kB         256 kB
├   └ css/4773fd37563d6b30.css             587 B
├ λ /basket/checkout                       4.89 kB         262 kB
├   └ css/5399f81d4a5a3315.css             938 B
├ λ /collections                           2.05 kB         255 kB
├ λ /collections/[slug]                    792 B           253 kB
├ λ /collections/category/[slug]           2.09 kB         255 kB
├ λ /email/order-confirmation/[slug]       591 B           253 kB
├ λ /essays                                2.06 kB         255 kB
├ λ /essays/[slug]                         470 B           253 kB
├ λ /essays/category/[slug]                2.03 kB         255 kB
├ λ /journal                               2.05 kB         255 kB
├ λ /journal/[slug]                        474 B           253 kB
...

├ λ /journal/category/[slug]               2.06 kB         255 kB
├ λ /order/order-confirmation              8.67 kB         266 kB
├   └ css/50084f88d6d052c2.css             529 B
├ λ /products                              2.1 kB          255 kB
├ λ /products/[slug]                       4.15 kB         257 kB
├   └ css/e0377321d13df66e.css             1.22 kB
├ λ /products/category/[slug]              1.98 kB         255 kB
└ λ /styles                                8.81 kB         228 kB
    └ css/3077863a4748e15d.css             3.52 kB
+ First Load JS shared by all              239 kB
  ├ chunks/framework-305cb810cde7afac.js   45.2 kB
  ├ chunks/main-49c9bd953ebaf2bf.js        28.6 kB
  ├ chunks/pages/_app-17c46d2ea32f7757.js  90.2 kB
  ├ chunks/webpack-0e1e5104a50731a9.js     949 B
  └ css/7703c8d58b79829f.css               74 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

✨  Done in 35.44s.

which is what I would expect from the

build:next:custom

After going through this rather convoluted build process, I AM ABLE to run

yarn serve

and all works there as expected... which is a win actually, just need to get to this stage from a single command, and not requiring a running dev instance to build next.

@858693520012476436

@969226489549713438

With this in mind, there's clearly something wrong with the

nextBuild()

inside the

server.ts

Any ideas on how to fix this?

seanzubrickas
last year
Hey
@357456032454410240
- we'll get some eyes on this ASAP and report back with some answers. Hold tight!
jakehopkinglast year
@364562745447940099
Thanks 🙏

@364562745447940099
— if someone needs to view the repo, then
@969226489549713438
already has access, with branch for latest prod updates:
feat/production-updates
jacobsfletch
last year
Hey
@357456032454410240
have you seen the latest Custom Server example? It's been recently updated, you might want to check it out:
https://github.com/payloadcms/payload/tree/master/examples/custom-server
jakehopkinglast year
@808734492645785600
❤️

I had been looking at this updated example, but missed a tiny difference due to having moved to a
/src
structure, the
nextBuild()
dir was
nextBuild(path.join(__dirname, ''));
rather than
nextBuild(path.join(__dirname, '../'));
. This simple change was the golden bullet 🚄 .

Thanks for suggesting I look again... and this time I noticed. Suffice to say, all works now! 🥳

And
@808734492645785600
as I'm typing, do you know more about the args that can be provided to
nextBuild
? I've updated mine to same as new custom server (with the
@ts-expect-error
) however I'd ideally like to know what options are best, rather than supressing this error.
jacobsfletch
last year
So happy that worked for you! Yea I know exactly what you’re talking about although I don’t know anything about the API beyond config path. Might be worth looking into though.

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.