[Bug]: ReferenceError: window is not defined | Out Of AppLayout

[MwSpaceLLC]

Browser

Chrome, Safari, Firefox, Edge

Package version

^3.0.775

React version

^18.3.1

Description

Plain client component mound with PieChart on nextjs without App layout

Source code

'use client'

import * as React from "react";

import PieChart from "@cloudscape-design/components/pie-chart";

import {Container} from "@cloudscape-design/components";

export default function PageCharts({data}) {

    const data02 = data.map(d => ({title: d.name, value: d.total}))

    return (
        <section className="py-6">
            <Container>
                <PieChart
                    hideFilter
                    variant="donut"
                    data={[data02[0]]}
                    detailPopoverContent={(datum, sum) => [
                        {key: "Resource count", value: datum.value},
                        {
                            key: "Percentage",
                            value: `${((datum.value / sum) * 100).toFixed(
                                0
                            )}%`
                        },
                        {key: "Last update on", value: datum.lastUpdate}
                    ]}
                    segmentDescription={(datum, sum) =>
                        `${datum.value} units, ${(
                            (datum.value / sum) *
                            100
                        ).toFixed(0)}%`
                    }
                />
            </Container>
        </section>
    )

}

Reproduction

Create component client Out Of AppLayout

errors:

 GET / 500 in 9363ms
 ⨯ ..\src\internal\utils\dom.ts (37:3) @ parseCssVariable
 ⨯ Internal error: ReferenceError: window is not defined
    at parseCssVariable (./node_modules/@cloudscape-design/components/internal/utils/dom.js:42:5)
    at createCategoryColorScale (./node_modules/@cloudscape-design/components/internal/utils/create-category-color-scale.js:19:75)
    at eval (./node_modules/@cloudscape-design/components/pie-chart/index.js:86:111)
    at Object.oN [as useMemo] (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:12:68806)
    at t.useMemo (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:162732)
    at PieChart (./node_modules/@cloudscape-design/components/pie-chart/index.js:85:64)
    at au (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:10446)
    at W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:15122
    at aw (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:16908)
    at a_ (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:49776)
    at aj (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:53793)
    at W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:42336
    at aw (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:42822)
    at a_ (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:49776)
    at aj (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:53793)
    at aC (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:52874)
    at a_ (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:50095)
    at aj (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:53793)
    at W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:42336
    at aw (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:42822)
    at a_ (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:49776)
    at aj (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:53793)
    at aC (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:52874)
    at a_ (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:50095)
    at aj (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:53793)
    at W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:42336
    at aw (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:42822)
    at a_ (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:49776)
    at aj (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:53793)
    at ab (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:11759)
    at W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:16871
    at aw (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:16908)
    at a_ (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:49776)
    at ab (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:11808)
    at W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:16871
    at aw (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:16908)
    at a_ (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:49776)
    at aw (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:45321)
    at a_ (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:49776)
    at aj (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:53793)
    at ab (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:11759)
    at W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:16871
    at aw (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:16908)
    at a_ (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:49776)
    at ab (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:11808)
    at W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:16871
    at aw (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:16908)
    at a_ (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:49776)
    at aj (W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:53793)
    at W:\clienti\admin.mateg.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:42336
digest: "599897103"
  35 |  */
  36 | export function parseCssVariable(value: string) {
> 37 |   if (window.CSS?.supports?.('color', 'var(--dummy, #000)') ?? false) {
     |   ^
  38 |     return value;
  39 |   }
  40 |

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems