storybook: TypeError: Cannot read property 'lightest' of undefined

@seanmhanson what happens when you run yarn list @storybook/theming (or whatever the npm equivalent is) or yarn list @emotion/core. i suspect that there’s some package that should be a singleton, that’s actually installed multiple times in your project due to some yarn/npm weirdness.

If you find that there are multiple copies installed, try installing @storybook/theming, clearing your lockfile, and re-generating.

Just a hunch…

This same issue had occurred for us yesterday after updating our yarn.lock (without updating storybook). Removing yarn.lock, node_modules did not helped.

I found out, that for some reason we had two @emotion/core in yarn.lock. We use emotionJS in our project aswell, the version in our package.json was 10.0.27. (I remember I already had to bump the version once to .27 when moving to SB 5.3). Bumping the version of @emotion/core in our package.json to 10.0.28 helped to have just one @emotion/core in yarn.lock.

Posting this here, because maybe it will help someone.

Just in case anyone is having the same issues as mentioned above or getting this error Cannot read property 'theme.color' of undefined after a recent upgrade to storybook 6.1.10 using npx sb upgrade

I can confirm that a complete nuke of storybook and a fresh re-install using npx sb init did it for me. I think some old dependencies were hanging around and causing some interferance 🤷‍♀️

To build on https://github.com/storybookjs/storybook/issues/7914#issuecomment-595508641, may I suggest this is a bug (or at least documentation gap?) in the way Emotion is depended upon in Storybook? I don’t see any documentation stating that you must install it yourself, but for instance, having the following dependencies

    "@storybook/addon-actions": "^5.3.18",
    "@storybook/addon-info": "^5.3.18",
    "@storybook/addon-knobs": "^5.3.18",
    "@storybook/addon-viewport": "^5.3.18",
    "@storybook/react": "^5.3.18",
    "@storybook/theming": "^5.3.18",

Yields the following UNMET PEER DEPENDENCY error:

npm ls @emotion/core
├─┬ @storybook/addon-knobs@5.3.18
│ └─┬ react-select@3.1.0
│   └── @emotion/core@10.0.16
├─┬ @storybook/react@5.3.18
│ └─┬ @storybook/core@5.3.18
│   └─┬ @storybook/ui@5.3.18
│     └── UNMET PEER DEPENDENCY @emotion/core@10.0.27
└─┬ @storybook/theming@5.3.18
  └── UNMET PEER DEPENDENCY @emotion/core@10.0.27

npm ERR! peer dep missing: @emotion/core@^10.0.27, required by emotion-theming@10.0.27
npm ERR! peer dep missing: @emotion/core@^10.0.27, required by @emotion/styled@10.0.27
npm ERR! peer dep missing: @emotion/core@^10.0.27, required by emotion-theming@10.0.27

npm install --save-dev @emotion/core@^10.0.27 alleviates the problem:

npm ls @emotion/core
├── @emotion/core@10.0.27
├─┬ @storybook/addon-knobs@5.3.18
│ └─┬ react-select@3.1.0
│   └── @emotion/core@10.0.27  deduped
├─┬ @storybook/react@5.3.18
│ └─┬ @storybook/core@5.3.18
│   └─┬ @storybook/ui@5.3.18
│     └── @emotion/core@10.0.27
└─┬ @storybook/theming@5.3.18
  └── @emotion/core@10.0.27

and fixes the bug from this issue.

Update: I had previously run npx npm-check-updates '/storybook/' -u which seemed to bump me to @storybook/addon-docs": "^5.2.0-alpha.33 which I hadn’t realised. I manually changed that to @storybook/addon-docs": "^5.2.5 and then npm install and npm i --package-lock-only and can now access the docs page free of errors.

New lock file don’t help me 😕

@shilman - tried adding "@storybook/theming": "^5.2.3", and still getting:

TypeError: Cannot read property 'lightest' of undefined
    at getScrollAreaStyles (http://localhost:6006/vendors~main.29b4625e4d045c010817.bundle.js:16817:78)

I don’t know what’s causing this, but we had the same issue. I pared it down to markdown looking like this (that’s double-indented text):

Converting it to a simple bullet list makes that error go away.

Hi @honorsuper , Yes, I resolved it. Try to remove package-lock/yarn lock files. It should help

thanks @shilman - I ended up ripping all the storybook related packages out of my package.json, and ran sb init from scratch and slowly re-added each storybook addon. It’s working perfectly now ✨

@pierrenel @Iuriy-Budnikov 99% sure this is the symptom of a version mismatch / yarn issue. I’m not sure what’s the best way to diagnose/fix, but I’ve seen and fixed this in dozens of different storybooks.

When trying to use the new Storybook Docs I am gettig theme.color is undefined and a new lock file didn’t help me.

There seem to be different versions of @storybook/theming being referenced. If I run npm list @storybook/theming I get:

├─┬ @storybook/addon-a11y@5.2.5
│ ├─┬ @storybook/api@5.2.5
│ │ └── @storybook/theming@5.2.5  deduped
│ ├─┬ @storybook/components@5.2.5
│ │ └── @storybook/theming@5.2.5  deduped
│ └── @storybook/theming@5.2.5  deduped
├─┬ @storybook/addon-actions@5.2.5
│ └── @storybook/theming@5.2.5  deduped
├─┬ @storybook/addon-docs@5.3.0-alpha.33
│ ├─┬ @storybook/api@5.3.0-alpha.33
│ │ └── @storybook/theming@5.3.0-alpha.33  deduped
│ ├─┬ @storybook/components@5.3.0-alpha.33
│ │ └── @storybook/theming@5.3.0-alpha.33  deduped
│ ├─┬ @storybook/source-loader@5.3.0-alpha.33
│ │ └─┬ @storybook/addons@5.3.0-alpha.33
│ │   └─┬ @storybook/api@5.3.0-alpha.33
│ │     └── @storybook/theming@5.3.0-alpha.33 
│ └── @storybook/theming@5.3.0-alpha.33 
├─┬ @storybook/react@5.2.5
│ └─┬ @storybook/core@5.2.5
│   ├── @storybook/theming@5.2.5  deduped
│   └─┬ @storybook/ui@5.2.5
│     └── @storybook/theming@5.2.5  deduped

I then npm i -D @storybook/theming and npm i --package-lock-only and then npm list @storybook/theming and npm list @emotion/core I get:

├─┬ @storybook/addon-a11y@5.2.5
│ ├─┬ @storybook/api@5.2.5
│ │ └── @storybook/theming@5.2.5  deduped
│ ├─┬ @storybook/components@5.2.5
│ │ └── @storybook/theming@5.2.5  deduped
│ └── @storybook/theming@5.2.5  deduped
├─┬ @storybook/addon-actions@5.2.5
│ └── @storybook/theming@5.2.5  deduped
├─┬ @storybook/addon-docs@5.3.0-alpha.33
│ ├─┬ @storybook/api@5.3.0-alpha.33
│ │ └── @storybook/theming@5.3.0-alpha.33  deduped
│ ├─┬ @storybook/components@5.3.0-alpha.33
│ │ └── @storybook/theming@5.3.0-alpha.33  deduped
│ ├─┬ @storybook/source-loader@5.3.0-alpha.33
│ │ └─┬ @storybook/addons@5.3.0-alpha.33
│ │   └─┬ @storybook/api@5.3.0-alpha.33
│ │     └── @storybook/theming@5.3.0-alpha.33 
│ └── @storybook/theming@5.3.0-alpha.33 
├─┬ @storybook/react@5.2.5
│ └─┬ @storybook/core@5.2.5
│   ├── @storybook/theming@5.2.5  deduped
│   └─┬ @storybook/ui@5.2.5
│     └── @storybook/theming@5.2.5  deduped
└── @storybook/theming@5.2.5 

├─┬ @storybook/addon-docs@5.3.0-alpha.33
│ ├─┬ @storybook/source-loader@5.3.0-alpha.33
│ │ └─┬ @storybook/addons@5.3.0-alpha.33
│ │   └─┬ @storybook/api@5.3.0-alpha.33
│ │     └─┬ @storybook/theming@5.3.0-alpha.33
│ │       └── @emotion/core@10.0.22 
│ └─┬ @storybook/theming@5.3.0-alpha.33
│   └── @emotion/core@10.0.22 
└─┬ @storybook/theming@5.2.5
  └── @emotion/core@10.0.22

These are my other config files just for reference:

package.json

{
  "name": "",
  "version": "0.0.1",
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "styled-components": "^4.4.0",
    "styled-system": "^5.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@storybook/addon-a11y": "^5.2.5",
    "@storybook/addon-actions": "^5.2.5",
    "@storybook/addon-docs": "^5.3.0-alpha.33",
    "@storybook/addon-links": "^5.2.5",
    "@storybook/addons": "^5.2.5",
    "@storybook/react": "^5.2.5",
    "@storybook/theming": "^5.2.5",
    "babel-loader": "^8.0.6"
  }
}

.storybook/addons.js

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-docs/register';
import '@storybook/addon-a11y/register';

.storybook/config.js

import ReactDOM from "react";
import { addDecorator, addParameters, configure } from "@storybook/react";
import { withA11y } from "@storybook/addon-a11y";
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { ThemeProvider } from "styled-components";
import theme from "../target/npm/frontend.ui.design_system.theme.js";

const themeDecorator = story =>
  ReactDOM.createElement(ThemeProvider, theme, story());

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
});

addDecorator(themeDecorator);
addDecorator(withA11y);
configure(require.context("../target/npm", true, /_stories.js$/), module);

.storybook/webpack.config.js

const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');

module.exports = async ({ config }) => {
  config.module.rules.push({
    test: /\.(stories|story)\.mdx$/,
    use: [
      {
        loader: 'babel-loader',
        // may or may not need this line depending on your app's setup
        options: {
          plugins: ['@babel/plugin-transform-react-jsx'],
        },
      },
      {
        loader: '@mdx-js/loader',
        options: {
          compilers: [createCompiler({})],
        },
      },
    ],
  });
  config.module.rules.push({
    test: /\.(stories|story)\.[tj]sx?$/,
    loader: require.resolve('@storybook/source-loader'),
    exclude: [/node_modules/],
    enforce: 'pre',
  });
  return config;
};

I’m running into this too after upgrading us to 5.2.4 and starting to move us away from storiesOf and toward CSFs. This happens for all stories (both CSF and storiesOf based stories, none are yet using MDX), and only when clicking the Docs tab. Here’s all the debugging info I could gather for y’all, unfortunately the repo is private.

Note: I have not yet tried installing "@storybook/theming" as a possible work-around, but will return here to update if that changes anything.

Packages

"@storybook/addon-actions": "5.2.4",
"@storybook/addon-docs": "5.2.4",
"@storybook/addon-info": "5.2.4",
"@storybook/addon-links": "5.2.4",
"@storybook/react": "5.2.4",

Config

Note: I’ve removed all of the addDecorator calls and stripped this just down to the req and configure call, and the error remains the same.

const React = require('react');
const { configure, addDecorator } = require('@storybook/react');
const { withInfo } = require('@storybook/addon-info');

addDecorator(
  withInfo({
    inline: true,
    header: true,
    source: false,
  })
);

addDecorator(story => <div style={{ width: '95%', margin: '0 auto' }}>{story()}</div>);

const req = require.context('./', true, /\.story\.(js|ts|tsx|mdx)$/);
configure(req, module);

Displayed Error

Cannot read property ‘lightest’ of undefined

TypeError: Cannot read property 'lightest' of undefined
    at getScrollAreaStyles (http://localhost:9001/vendors~main.446c0681352a8017e829.bundle.js:17810:78)
    at http://localhost:9001/vendors~main.446c0681352a8017e829.bundle.js:35180:100
    at updateContextConsumer (http://localhost:9001/vendors~main.446c0681352a8017e829.bundle.js:189627:19)
    at beginWork (http://localhost:9001/vendors~main.446c0681352a8017e829.bundle.js:189815:14)
    at performUnitOfWork (http://localhost:9001/vendors~main.446c0681352a8017e829.bundle.js:193455:12)
    at workLoop (http://localhost:9001/vendors~main.446c0681352a8017e829.bundle.js:193495:24)
    at renderRoot (http://localhost:9001/vendors~main.446c0681352a8017e829.bundle.js:193578:7)
    at performWorkOnRoot (http://localhost:9001/vendors~main.446c0681352a8017e829.bundle.js:194485:7)
    at performWork (http://localhost:9001/vendors~main.446c0681352a8017e829.bundle.js:194397:7)
    at performSyncWork (http://localhost:9001/vendors~main.446c0681352a8017e829.bundle.js:194371:3)

Console Error

ScrollAreaStyles.js:120 Uncaught TypeError: Cannot read property 'lightest' of undefined
    at getScrollAreaStyles (ScrollAreaStyles.js:120)
    at core.browser.esm.js:174
    at updateContextConsumer (react-dom.development.js:15484)
    at beginWork (react-dom.development.js:15672)
    at performUnitOfWork (react-dom.development.js:19312)
    at workLoop (react-dom.development.js:19352)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:18578)

The above error occurred in the <Context.Consumer> component:
    in ForwardRef(render)
    in ScrollArea
    in Unknown (created by Context.Consumer)
    in Bar (created by FlexBar)
    in div (created by FlexBar)
    in FlexBar
    in Unknown (created by Context.Consumer)
    in Styled(Component) (created by Toolbar)
    in Toolbar (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Preview (created by Context.Consumer)
    in Preview (created by DocsStory)
    in div (created by Anchor)
    in Anchor (created by DocsStory)
    in DocsStory (created by Context.Consumer)
    in DocsPage (created by Context.Consumer)
    in DocsPage
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in MDXProvider (created by DocsContainer)
    in ThemeProvider (created by DocsContainer)
    in DocsContainer

Having the same issue here 😦