#storybook-design-token Addon - TypeError: Cannot read properties of undefined (reading 'document')

3 messages · Page 1 of 1 (latest)

cyan knot
#

Typescript Enabled Project

Version of Storybook 7

  • 7.0.0-beta.40

Error on the docs page:
Cannot read properties of undefined (reading 'document')

TypeError: Cannot read properties of undefined (reading 'document')
    at ./node_modules/storybook-design-token/node_modules/@storybook/addon-docs/dist/esm/blocks/mdx.js (http://localhost:6007/vendors-node_modules_storybook-design-token_dist_doc-blocks_js.iframe.bundle.js:14272:64)
    at __webpack_require__ (http://localhost:6007/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6007/runtime~main.iframe.bundle.js:328:25)
    at ./node_modules/storybook-design-token/node_modules/@storybook/addon-docs/dist/esm/blocks/Subheading.js (http://localhost:6007/vendors-node_modules_storybook-design-token_dist_doc-blocks_js.iframe.bundle.js:13798:62)
    at __webpack_require__ (http://localhost:6007/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6007/runtime~main.iframe.bundle.js:328:25)
    at ./node_modules/storybook-design-token/node_modules/@storybook/addon-docs/dist/esm/blocks/DocsStory.js (http://localhost:6007/vendors-node_modules_storybook-design-token_dist_doc-blocks_js.iframe.bundle.js:12839:69)
    at __webpack_require__ (http://localhost:6007/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6007/runtime~main.iframe.bundle.js:328:25)
    at ./node_modules/storybook-design-token/node_modules/@storybook/addon-docs/dist/esm/blocks/Primary.js (http://localhost:6007/vendors-node_modules_storybook-design-token_dist_doc-blocks_js.iframe.bundle.js:13065:68)
#

General Setup Files:

  • Package.json
"storybook-design-token": "^2.8.2",
  • .storybook/main.js
...
"stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "storybook-design-token",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
...
  • .storybook/preview.js
...
designToken: {
  disable: true, /* Disabled as we will only use Doc Blocks for Documentation Pages */
}
...
  • src/design-tokens/Docs/Colours.mdx (have also tried as Colours.stories.mdx)
import { Meta, Canvas } from "@storybook/blocks"; // Have also tried using @storybook/addon-docs
import { DesignTokenDocBlock } from "storybook-design-token/dist/doc-blocks"

<Meta title="Style Guide/Colours" />

# Colours
Example to show it works

// I've also tried wrapping this in a Canvas
<DesignTokenDocBlock categoryName="Colours" />
  • CSS File to store variables. src/design-tokens/BaseTokens.css
:root {
    /**
      * @tokens Colours
      * @presenter Color
      */
  
    --b100: hsl(240, 100%, 90%); /* Token Description Example  @presenter Color */
    --example-red: #EE4B2B;
}
#

storybook-design-token Addon - TypeError: Cannot read properties of undefined (reading 'document')