描述
Describe 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(R) Core(TM) 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.