Like what we’re doing? Star us on GitHub!

Issues by Color picker

Duckinm
last year
1 3

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.

Screen Shot 2564-08-08 at 6 49 22 AM
Screen Shot 2564-08-08 at 6 50 02 AM

  • Duckinm
    last year

    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
    last year

    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
    last year

    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:
    128617001-4e9354df-3e35-4b7b-846a-0d05c711889d

    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
    last year

    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
    last year

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

  • jmikrut
    Payload Team
    last year

    @Duckinm I love it when things work!

    Keep it up!

  • Duckinm
    last year

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

  • richardvanbergen
    last year

    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
    last year

    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
    last year

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

    Screen Shot 2564-08-08 at 7 30 44 AM

Open the post
Continue the discussion in GitHub
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More