Issues by Color picker

[Duckinm]

I try to implement the colour picker the way the blog does and use it as a field of the block.

Everything work on the admin panel, but on my front side it's doom. As I thought the issues may occur while I adding the colour or something... It's about Button Component that imports from payload/components using as a part of custom InputField of colour picker

Using:
Next JS Framework

My error log:
Global CSS cannot be imported from within node_modules.

[richardvanbergen]

Can we see the code where you're importing the CSS?

It looks to be a common issue with next.js

vercel/next.js#19936 (comment)

[Duckinm]

I read that thread already. Actually a lot of threads. It's really happening whether no css file there.

Here my _app.scss

`
import type { NextComponentType } from 'next'
import App, { AppContext, AppInitialProps, AppLayoutProps } from 'next/app'
import { ReactNode } from 'react'
import '../styles/app.scss'

const MyApp: NextComponentType<AppContext, AppInitialProps, AppLayoutProps> = ({
Component,
pageProps,
}: AppLayoutProps) => {
const getLayout = Component.getLayout || ((page: ReactNode) => page)
return getLayout(<Component {...pageProps} />)
}

MyApp.getInitialProps = async (appContext) => {
const appProps = await App.getInitialProps(appContext)

// Analytics Global Fetch
const settings = await fetch(
${process.env.NEXT_PUBLIC_SERVER_URL}/api/globals/settings
).then((res) => res.json())

return {
...appProps,
settings,
}
}

export default MyApp
`

[Duckinm]

Right now, I didn't even know how to remove this bug!

[Duckinm]

Updated! The error didn't come from the Color Picker but coming from index.ts in Block Folder which include all components of Blocks error occurring while RenderBlocks Component are read (Boilerplate from Custom website series).

I've to fix the index.ts which I also still do not know how it bugs? I do follow all the templates T_T

[jmikrut]

Hey @Duckinm — I can provide a bit of context here for you!

I have also run into this exact problem. It's indeed due to exactly the NextJS issue that @richardvanbergen mentioned.

You are attempting to combine your frontend block code in the same file as your Payload config, which contains the color picker... exactly how we are doing in our NextJS boilerplate here. Notice how the React component that we render on the frontend is in the same file as the Payload block config itself.

This is super nice and tidy, but it only works if you do not import any CSS / SCSS files directly from node modules....unfortunately.

The way around it is to completely separate your NextJS frontend component from your Payload component. Then, you'd import your frontend component from a totally separate file. So, when NextJS imports your frontend component, it won't import any Payload backend code (including your color picker custom field).

This is actually probably a better pattern in your case anyway, as having NextJS import a file containing both your Payload code and your frontend code will create a larger bundle filesize for your frontend app.

Just split out your frontend component into a separate file, and import it from there. That should fix it!

[Duckinm]

Bloody Hell! I quickly separate components from the block file and then it's work now!

[jmikrut]

@Duckinm I love it when things work!

Keep it up!

[Duckinm]

I got a bit hurry to forgot to say, Thank you!

[Bazitron]

Gentlement, please share an example how to separate and import front part of code. I'm facing the same problem, but can't separate them.
Thank you in advance.