Using `useGlobals` inside DocPage throws an error: Cannot read property 'updateGlobals' of undefined

See original GitHub issue

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:

  1. Add a custom doc page globally or on component or story level
  2. Use the useGlobals hook in the custom docs page
  3. Go to storybook and the docs tab
  4. 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:open
  • Created 3 years ago
  • Reactions:5
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

6reactions
frassiniercommented, Jun 21, 2021

@williamliangwl Here is a workaround I found today!

import { addons } from '@storybook/addons';
import { DocsContainer } from '@storybook/addon-docs';
import { UPDATE_GLOBALS } from '@storybook/core-events';

export const globalTypes = {
	theme: {
		name: 'Theme',
		description: 'Choose a theme to apply',
		toolbar: {
			icon: 'paintbrush',
			items: [
				{ value: 'light', left: '⚪️', title: 'Default theme' },
				{ value: 'dark', left: '⚫️', title: 'Dark theme' },
			],
		},
	},
};

export const parameters = {
	docs: {
		container: props => {
			const channel = addons.getChannel();
			const hasDarkMode = props.context.globals.theme === 'dark';
			return (
				<>
					<Switch
						label={'Dark mode'}
						onChange={() => {
							channel.emit(UPDATE_GLOBALS, {
								globals: { theme: hasDarkMode ? 'light' : 'dark' },
							});
						}}
						checked={hasDarkMode}
					/>
					<DocsContainer {...props} />
				</>
			);
		},
	},
};

Hope it can help!

3reactions
williamliangwlcommented, Apr 27, 2021

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 ?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using `useGlobals` inside DocPage throws an error
Using `useGlobals` inside DocPage throws an error: Cannot read property 'updateGlobals' of undefined #12982 · Describe the bug I need to access the...
Read more >
reactjs - Cannot read properties of undefined (reading 'type ...
I have such a problem when I launch storybook, this error appears in my localhost:6006 and I no longer ...
Read more >
storybook cannot read properties of undefined
The TypeError: Cannot read properties of undefined (reading 'type') exception occurs in storybook when one defines the argTypes in the default export object ......
Read more >
Toolbars & globals - Storybook - JS.ORG
When the globals change, the story re-renders, and the decorators rerun with the new values. The easiest way to change globals is to...
Read more >
How to build a Storybook addon
Enhance and automate parts of your UI development workflow. ... Storybook is a tool for developing UI components outside your app in an...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found