Using `useGlobals` inside DocPage throws an error: Cannot read property 'updateGlobals' of undefined
See original GitHub issueDescribe the bug
I need to access the globals set by toolbar addon in the custom DocPage I have set for the docs addon.
The toolbar addon documentation instructs to use the useGlobals hook to consume the globals within an addon.
However, when I try to use the useGlobals hook in the DocPage it throws an error:
Uncaught TypeError: Cannot read property 'updateGlobals' of undefined
at useGlobals (index.js:550)
at page (button.stories.tsx:67)
at renderWithHooks (react-dom.development.js:16260)
at mountIndeterminateComponent (react-dom.development.js:18794)
at beginWork$1 (react-dom.development.js:20162)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at beginWork$$1 (react-dom.development.js:25780)
at performUnitOfWork (react-dom.development.js:24698)
To Reproduce Steps to reproduce the behavior:
- Add a custom doc page globally or on component or story level
- Use the
useGlobalshook in the custom docs page - Go to storybook and the docs tab
- Check the browser dev tools console for the error
Expected behavior Expected to render the doc page without errors and have access to the globals.
Code snippets
Here’s the code from my DocsPage.tsx file:
import * as React from "react";
import {
ArgsTable,
Description,
PRIMARY_STORY,
Primary,
Stories,
Subtitle,
Title,
} from "@storybook/addon-docs/blocks";
import { useGlobals } from "@storybook/api";
export const DocsPage = () => {
const [globals] = useGlobals();
return (
<Title />
<Subtitle />
<Description />
<Primary />
<ArgsTable story={PRIMARY_STORY} />
<Stories />
);
};
And here’s how I set the doc page in preview.ts file with addParameters function:
addParameters({
viewport,
options: { storySort, theme },
controls: { hideNoControlsWarning: true },
docs: {
page: DocsPage
},
});
System Environment Info:
System: OS: macOS Mojave 10.14.6 CPU: (12) x64 Intel® Core™ i9-8950HK CPU @ 2.90GHz Binaries: Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node Yarn: 1.22.4 - ~/.yarn/bin/yarn npm: 6.14.5 - ~/.nvm/versions/node/v12.18.2/bin/npm Browsers: Chrome: 86.0.4240.111 Firefox: 72.0.2 Safari: 14.0
Additional Info
I’m using @storybook/core@6.0.27 and @storybook/addon-essentials@6.0.27.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:5
- Comments:12 (5 by maintainers)
Top Related StackOverflow Question
@williamliangwl Here is a workaround I found today!
Hope it can help!
Wondering if this is going to be added ?
I want to create an addon on Toolbar that affect the story rendering of both Canvas and Docs tab, so I plan to have the “communication” done through Globals
Or is there a workaround for that use case ?