Uncaught Error with parseColor using OKLCH color format in Next.js

[shing100]

Hello,

I'm currently developing a project using Next.js and encountered an issue with parsing colors in the OKLCH format. The exact error message I received is:

Uncaught Error: parseColor received unparseable color: oklch(0.3551920.032071262.989)
    at VM6957 embed.js:49:9245
    at j (VM6957 embed.js:49:10631)
    at k (VM6957 embed.js:49:10790)
    at Object.m [as getAnchorColor] (VM6957 embed.js:49:11113)
    at i.toJSON (VM6957 embed.js:49:15415)
    at c.loadEmbed [as _loadEmbed] (VM6957 embed.js:51:11455)
    at VM6957 embed.js:51:15686

my code is:

import {DiscussionEmbed} from "disqus-react";

export default function LocationSalaryStat() {
    return (
        <div className="min-h-screen p-8">
            <h2 className="text-3xl font-bold mb-8 text-center">location</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {locationData.map((location) => (
                    <LocationCard key={location.name} location={location} />
                ))}
            </div>
            <DiscussionEmbed
                key={"light"}
                shortname='insight-jov'
                config={
                    {
                        url: "http://localhost:3000/salary/location",
                        identifier: "industry",
                        title: "location",
                        language: 'ko',
                    }
                }
            />
        </div>
    );
}

I've checked the color value format and it seems to be correct according to the OKLCH color specification. However, the parser seems unable to recognize or parse this format correctly.

Has anyone encountered a similar issue or does anyone know why this specific color format is causing an error? I'm wondering if there's a specific library or plugin that I need to use to support OKLCH color parsing in Next.js, or if there's a workaround for this issue.

Any advice or suggestions would be greatly appreciated. Thank you in advance for your help

Environment Details:

Next.js version: 14.1.0
Additional libraries/plugins used (if any): daisyUI 4.7.0

Looking forward to any insights or solutions from the community. Thank you!

[Priambodo-Kurniawan]

I also experienced the same issue when using Disqus + daisyUI 4.7.0, and after I investigated, the cause was found to be in that latest version of daisyUI.

The temporary solution was that I used is using daisyUI version 3.9.4. After I downgraded, the error disappeared, but it should be noted that some features in daisyUI 4.7.0 stopped working. In my case, it wasn't a problem because I hadn't yet used the latest components from daisyUI.

Hope this helps.

[shing100]

thank you. The daisyUI version downgrade issue has been resolved.

[Godsenal]

This issue arises from Disqus not being able to parse the background color in JavaScript code due to the lack of support for OKLCH. Since version 4 of DaisyUI, browsers that support OKLCH use it, so I am encountering the same issue. A temporary workaround to keep using version 4 while making Disqus work is to directly specify the background color as follows:

:root[data-theme="light"] {
  background-color: // light bg color
  color:  // light content color
}

:root[data-theme="dark"] {
  background-color:  // dark bg color
  color:  // dark content color
}

[romanchelsea]

This issue arises from Disqus not being able to parse the background color in JavaScript code due to the lack of support for OKLCH. Since version 4 of DaisyUI, browsers that support OKLCH use it, so I am encountering the same issue. A temporary workaround to keep using version 4 while making Disqus work is to directly specify the background color as follows:

:root[data-theme="light"] {
  background-color: // light bg color
  color:  // light content color
}

:root[data-theme="dark"] {
  background-color:  // dark bg color
  color:  // dark content color
}

Will overriding background-color and color work? According to DaisyUI colors, there are so many more colors that are using oklch().

It works. Thanks!

[real-zephex]

This issue arises from Disqus not being able to parse the background color in JavaScript code due to the lack of support for OKLCH. Since version 4 of DaisyUI, browsers that support OKLCH use it, so I am encountering the same issue. A temporary workaround to keep using version 4 while making Disqus work is to directly specify the background color as follows:

:root[data-theme="light"] {
  background-color: // light bg color
  color:  // light content color
}

:root[data-theme="dark"] {
  background-color:  // dark bg color
  color:  // dark content color
}

It didn't work for me. Maybe, I am doing something wrong? I created a new file named styles.css and imported it into the Disqus component file. Am I doing something wrong?