Open-source by Keenthemes!Support our KtUI and ReUI open-source projects and help with growth.
Star on Github 
Solution for Metronic 9.2 Error: Unexpected token IDHash("ccc'")
(Solution below!!!) I've imported template project of Metronic 9.2 Next.js + TypeScript version. I've faced the next error:./src/css/styles.css:7925:47
Parsing css source code failed
7923 | }
7924 | .\[\&_\.recharts-cartesian-grid_line\[stroke\=\\\'\#ccc\\\'\]\]\:stroke-border\/50 {
> 7925 | & .recharts-cartesian-grid line[stroke=\'#ccc\'] {
| ^
7926 | stroke: var(--border);
7927 | @supports (color: color-mix(in lab, red, red)) {
7928 | stroke: color-mix(in oklab, var(--border) 50%, transparent);
Unexpected token IDHash("ccc'") at [project]/src/css/styles.css:7924:46
Referenced file: components/ui/chart.tsx (only needed part)
...
return (
<ChartContext.Provider value={{ config }}>
<div
data-slot="chart"
data-chart={chartId}
ref={ref}
className={cn(
'[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke=\'#ccc\']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke=\'#ccc\']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke=\'#ccc\']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke=\'#fff\']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke=\'#fff\']]:stroke-transparent [&_.recharts-surface]:outline-hidden',
className,
)}
{...props}
>
<ChartStyle id={chartId} config={config} />
<RechartsPrimitive.ResponsiveContainer>
{children}
</RechartsPrimitive.ResponsiveContainer>
</div>
</ChartContext.Provider>
);
...
Solution:
Replace
\' with " around the id with hash.Example:
stroke=\'#ccc\' -> stroke="#ccc"And problem has gone
Replies (1)
Hi ,
Great spot! Thanks for sharing this!
Regards,
Sean
