[Bug] - useArgs error in custom addon

[lukastanisic99]

Describe the bug

I've cloned the repo. I've installed dependencies with yarn. Yarn start doesn't work and it throws an error 'unknown quite flag', but removing the flag works. I've tried a simple modification to the PanelContent.tsx by import { useArgs } from "@storybook/manager-api"; and later const [args, updateArgs,resetArgs] = useArgs(); which throws an error in the browser - "Uncaught TypeError: Cannot read properties of undefined (reading 'type') at useArgs (chunk-QQ57T6RI.mjs:53:34107)"

I've taken a look at the controls addon - specifically (https://github.com/storybookjs/storybook/blob/next/code/addons/controls/src/ControlsPanel.tsx) and I use the useArgs method in the same way. I'm attaching a screenshot of the error message and code for PanelContent.tsx.

Modified PanelContent.tsx from this repo: ` import React, { Fragment,useEffect, useState } from "react"; import { styled, themes, convert } from "@storybook/theming"; import { TabsState, Placeholder, Button } from "@storybook/components"; import { useArgs } from "@storybook/manager-api"; import { List } from "./List";

export const RequestDataButton = styled(Button)({ marginTop: "1rem", });

type Results = { danger: any[]; warning: any[]; };

interface PanelContentProps { results: Results; fetchData: () => void; clearData: () => void; }

/**

• Checkout https://github.com/storybookjs/storybook/blob/next/code/addons/jest/src/components/Panel.tsx

• for a real world example */ export const PanelContent: React.FC = ({ results, fetchData, clearData, }) => { const [args, updateArgs,resetArgs] = useArgs(); console.log(args) return( <TabsState initial="overview" backgroundColor={convert(themes.normal).background.hoverable}

  <div id="overview" title="Overview" color={convert(themes.normal).color.positive}

  Addons can gather details about how a story is rendered. This is panel uses a tab pattern. Click the button below to fetch data for the other two tabs.

    <RequestDataButton outline small onClick={clearData}>
      Clear data
    </RequestDataButton>
    <Button onClick={()=>{
      console.log('test')
    }}>Test</Button>
  </Fragment>

[Sidnioulz]

Haven't read through all of this, and also not a SB maintainer, so I may be wrong, but it seems to me you want to call useArgs in a manager context. IIRC, useArgs is exposed by the preview API, not the manager API, so it should not be available with the import you're using and it also should not work outside a story context.

[lukastanisic99]

Thanks for the reply! How is this different than the control addon? If you have the time take a look at this - https://github.com/storybookjs/storybook/blob/next/code/addons/controls/src/ControlsPanel.tsx

[winkerVSbecks]

The import is fine. You're importing from the manager-api where the panel code runs.

The issue is, and I learnt it today, that getCurrentStoryData might not be ready in time. In the control panel example you shared, there's a check for this. https://github.com/storybookjs/storybook/blob/next/code/addons/controls/src/manager.tsx#L29

[winkerVSbecks]

You'll also need to:

• rename manager.ts to manager.tsx
• add import React from "react"; to manager.tsx
• Update entry: ["src/index.ts", "src/preview.ts", "src/manager.tsx"], in tsup.config.ts