Server runtime error when importing images for front-end

[PegasisForever]

Bug Report

If you import images in Custom Components,
After compiling, the image is copied to build (for front-end) but not dist (for back-end)
When running the back-end server, it tries to import the non-existent image from dist, causing error.

Expected Behavior

The imported image should also be copied to dist.

Current Behavior

The imported image is not copied to dist.

Steps to Reproduce

1. use an imported image in Custom Components
2. yarn build
3. yarn serve
4. Error

Detailed Description

Payload version: v0.17.2

[jmikrut]

Hey @PegasisForever — this is actually something that affects most all TypeScript projects. Typically the package copyfiles is used to copy all non-TS files that are still necessary into a /dist folder or similar.

Here are our build scripts that we typically use at TRBL:

    "copyfiles": "copyfiles -u 1 src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png} dist/",
    "build:payload": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
    "build:server": "tsc",
    "build": "yarn build:server && yarn build:payload && yarn copyfiles"

You'll just need to make sure that copyfiles is installed locally via NPM and then boom - you're set. This is not an issue with Payload per se - so I'm going to move this to a Discussion because other people will probably encounter the same thing!