Issues by Color picker

Duckinm

2 years ago

1 3

• Selected Answer
  

  Duckinm

  2 years ago

  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

  6 replies
• 

  DanRibbens

  Payload Team

  2 years ago

  Hi there, sorry you're having some difficulty. I'm not as familiar with the video series code.
  Is it a problem with the config used within the blocks? I would try removing or commenting out parts of the config to isolate the problem. We can help more easily of you share your config and also any errors you are getting.

• 

  Duckinm

  2 years ago

  Thank you for replying, As my isolation is being fractured...

  These issues coming from The colour picker as I firstly interpret, Everything in the Blocks Components is fine. without implementing a colour picker!!! (Color picker is the one from the blog does, I just copy & paste.)

  Here, One of my Block that using ColorField:

  `import { Block } from 'payload/types'
  import React from 'react'
  import colorField from 'src/components/ColorPicker/config'

  export type Type = {
  blockType: 'content'
  blockName?: string
  colorField: string

  }

  export const Content: Block = {
  slug: 'content',
  labels: {
  singular: 'Content',
  plural: 'Content Blocks',
  },
  fields: [
  colorField,
  ],
  }

  export const Component: React.FC = () => return

  
  export default Content
  `

  And here the error again:
  

  Hope we could find a way to secure this. Because I really want to use this colour picker as a block component so much.

  Oh! Forgot to mention; It's 100% work on a collection

• 

  jmikrut

  Payload Team

  2 years ago

  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

  2 years ago

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

• 

  jmikrut

  Payload Team

  2 years ago

  @Duckinm I love it when things work!

  Keep it up!

• 

  Duckinm

  2 years ago

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

• 

  richardvanbergen

  2 years ago

  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)

  1 reply
  

  Duckinm

  2 years ago

  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

  2 years ago

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