Donut causes error when following examples: TypeError: Cannot use 'in' operator to search for 'displayName' in undefined

[pseudovar]

🙋 Documentation Request

When following any of the examples in the documentation or storybook, the Donut chart throws an error. Happy to provide more details, but unsure if this is to be expected.

🧢 Your Company/Team

Adobe/Solution Consulting

[marshallpete]

@pseudovar thanks for filing the issue. Can you provide the steps to reproduce?

[pseudovar]

Sure thing.

I've got an App Builder app (package.json below) where I I've got a dashboard that I want to include a Donut chart on.

I tried a few different examples from Storybook and wiki however they return the above error.

Note: Other charts from the library are working without any issue, so unsure what I'm doing wrong.

Any help would be appreciated.

Here is my most recent component attempt:

import React from 'react'

import {
    Donut,
    Legend,
    Chart,
    Metric,
    Axis,
    Bar,
    ChartTooltip,
    ChartPopover,
} from '@adobe/react-spectrum-charts'

const PieChart = () => {
    const dialogContent = (datum) => {
        return (
            <Content>
                <div>Browser: {datum.segment}</div>
                <div>Visitors: {datum.count}</div>
            </Content>
        )
    }

    const basicDonutData = [
        { id: 1, count: 4000, segment: 'Other' },
        { id: 2, count: 6000, segment: 'Opera' },
        { id: 3, count: 10000, segment: 'Chrome' },
        { id: 4, count: 3000, segment: 'Brave' },
        { id: 5, count: 7000, segment: 'Safari' },
        { id: 6, count: 8000, segment: 'Firefox' },
        { id: 7, count: 1000, segment: 'Unknown' },
    ]

    const args = {
        metric: 'count',
        metricLabel: 'Visitors',
        segment: 'segment',
        color: 'id',
        hasDirectLabels: true,
        holeRatio: 0.8,
    }

    return (
        <>
            <h2>Chart</h2>
            <Chart data={basicDonutData}>
                <Donut {...args}>
                    <ChartTooltip>{dialogContent}</ChartTooltip>
                    <ChartPopover width={150}>{dialogContent}</ChartPopover>
                </Donut>
                <Legend
                    title="Browsers"
                    position={'right'}
                    legendLabels={basicDonutData.map((d) => ({
                        label: d.segment,
                        seriesName: d.id,
                    }))}
                    highlight
                    isToggleable
                />
            </Chart>
        </>
    )
}

export default PieChart

{
  "name": "AIODemoToolkit",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@adobe/aio-sdk": "^3.0.0",
    "@adobe/exc-app": "^1.3.3",
    "@adobe/generator-add-action-generic": "^0.2.9",
    "@adobe/generator-app-excshell": "^0.2.4",
    "@adobe/react-spectrum": "^3.34.1",
    "@adobe/react-spectrum-charts": "^1.5.0",
    "@adobe/react-spectrum-workflow": "^2.3.4",
    "@faker-js/faker": "^8.3.1",
    "@orama/orama": "^2.0.0-beta.3",
    "@orama/plugin-data-persistence": "^2.0.0-beta.3",
    "@spectrum-icons/illustrations": "^3.6.11",
    "@spectrum-icons/workflow": "^4.2.10",
    "core-js": "^3.6.4",
    "node-fetch": "^2.6.0",
    "openai": "^4.25.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^4.0.13",
    "react-router-dom": "^5.2.0",
    "react-syntax-highlighter": "^15.5.0",
    "regenerator-runtime": "^0.13.5",
    "vega": "^5.28.0",
    "vega-lite": "^5.18.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-transform-react-jsx": "^7.8.3",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "@openwhisk/wskdebug": "^1.3.0",
    "jest": "^29"
  },
  "scripts": {
    "test": "jest --passWithNoTests ./test",
    "e2e": "jest --collectCoverage=false --testRegex ./e2e"
  },
  "engines": {
    "node": "^14.18 || ^16.13 || >=18"
  },
  "aio-app-builder-templates": [
    "@adobe/generator-app-excshell",
    "@adobe/generator-add-action-generic"
  ]
}

[marshallpete]

I see. I need to go in and clarify in the docs better.

Donut is currently in alpha so to use it you import from @adobe/react-spectrum-charts/alpha

It's not a separate install, just an additional import.

Give that a try and let me know if you have any other issues. I'll update the docs in the mean time.

[marshallpete]

Ok the docs have been updated. Hopefully they are more useful now. Sorry for the confusion.

[pseudovar]

Thanks, ok that makes sense now.

Unfortunately, it's throwing an error:

[marshallpete]

Sorry for the delayed response. I haven't forgotten about you. I think I need to spend sometime testing our library in Parcel.

In the mean time you can create the Donut component in your repository instead of trying to import. Donut is a pseudo component, meaning it doesn't actually do anything. Here is the code: https://github.com/adobe/react-spectrum-charts/blob/main/src/alpha/components/Donut/Donut.tsx

Basically the RSC chart component looks at the children passed to it and builds out the chart accordingly. This is also known as a collection component. Because of this you can copy and paste the above component into your repo and pass that into Chart and it should unblock you while I figure out the build with parcel.

[marshallpete]

You don't even need the destructured props, we just do that so that story book automatically picks up the props and their types, defaults etc.

[marshallpete]

@pseudovar , I figured out what is causing your import issue. /alpha uses the exports option in package.json. Since you are using parcel, in order to take advantage of any libraries that use exports or 'imports', you need to add the following to your package.json.

  "@parcel/resolver-default": {
    "packageExports": true
  },

See https://parceljs.org/blog/v2-9-0/#new-resolver

[marshallpete]

Can you confirm whether or not this fixes your issue?

[pseudovar]

Hi @marshallpete I can confirm. Sorry I have been away on PTO, the first suggestion of manually using it worked. I will try the parcel fix above hopefully today. Thanks again for your support.