Stylesheets of custom components can't resolve on fields

[matthijs166]

Bug Report

I implemented https://github.com/payloadcms/custom-field-guide and get an error on build
Error: Cannot find module './styles.scss', its the stylesheet of a custom component.

Expected Behavior

That the build doesn't fail when I include custom stylesheets

Current Behavior

When I run payload dev everything works fine but the moment I'm building the project it crashes

Steps to Reproduce

1. Clone https://github.com/payloadcms/custom-field-guide
2. Update payload to 1.0.11
3. npm run build
4. npm run serve

I have posted also an issue here (payloadcms/custom-field-guide#2) but I think it's a bug in payload self.
Or I am implementing it wrong but then the docs need to be updated.

I also get the bug in v0.7.4

[jmikrut]

Hey @matthijs166 — this is actually due to your TypeScript build process and is a common problem that TypeScript projects often face.

The jist of this is that when you build a TS project, tsc or whatever you're using copies all TS / JS files used into your /dist folder or wherever you're building to. But, in your src folder, you might have other files that also need to be copied over, like scss, svg, etc.

You need to use copyfiles or similar to copy those files too, if this applies to you. You can see in our public demo build process where we use copyfiles to copy all non-TS / JS files to /dist at build-time.

Do that, and you'll be good. In the meantime, we'll update our create-payload-app to automatically include this step so others don't have the same issue.

I'm going to convert this to a discussion because I think it will help others out!