TypeError: Cannot read property 'lightest' of undefined

I have installed Storybook Docs as per the documentation here: https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md#installation

And I have used the Manual preset configuration.

When I view the Docs tab for any of my stories I get the following error:

TypeError: Cannot read property 'lightest' of undefined
    at getScrollAreaStyles (http://localhost:6006/vendors~main.e02af6e0f1f31fb510a2.bundle.js:11822:78)
    at http://localhost:6006/vendors~main.e02af6e0f1f31fb510a2.bundle.js:41276:100
    at updateContextConsumer (http://localhost:6006/vendors~main.e02af6e0f1f31fb510a2.bundle.js:92999:19)
    at beginWork (http://localhost:6006/vendors~main.e02af6e0f1f31fb510a2.bundle.js:93187:14)
    at performUnitOfWork (http://localhost:6006/vendors~main.e02af6e0f1f31fb510a2.bundle.js:96827:12)
    at workLoop (http://localhost:6006/vendors~main.e02af6e0f1f31fb510a2.bundle.js:96867:24)
    at renderRoot (http://localhost:6006/vendors~main.e02af6e0f1f31fb510a2.bundle.js:96950:7)
    at performWorkOnRoot (http://localhost:6006/vendors~main.e02af6e0f1f31fb510a2.bundle.js:97857:7)
    at performWork (http://localhost:6006/vendors~main.e02af6e0f1f31fb510a2.bundle.js:97769:7)
    at performSyncWork (http://localhost:6006/vendors~main.e02af6e0f1f31fb510a2.bundle.js:97743:3)

Any ideas what the problem could be or where I could start looking to see the issue?

The packages used are as follows:

    "@babel/core": "^7.4.5",
    "@storybook/addon-docs": "^5.2.0-beta.46",
    "@storybook/addon-knobs": "^5.2.0-beta.46",
    "@storybook/addon-notes": "^5.2.0-beta.46",
    "@storybook/html": "^5.2.0-beta.46",
    "babel-loader": "^8.0.6",
    "webpack": "^4.39.3"

The config.js file is as follows:

import { addParameters, configure } from '@storybook/html';
import { themes } from '@storybook/theming';
import yourTheme from './yourTheme';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

// Option defaults:
addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage
  },
  options: {
    /**
     * show story component as full screen
     * @type {Boolean}
     */
    isFullscreen: false,
    /**
     * display panel that shows a list of stories
     * @type {Boolean}
     */
    showNav: true,
    /**
     * display panel that shows addon configurations
     * @type {Boolean}
     */
    showPanel: true,
    /**
     * where to show the addon panel
     * @type {('bottom'|'right')}
     */
    panelPosition: 'bottom',
    /**
     * sorts stories
     * @type {Boolean}
     */
    sortStoriesByKind: false,
    /**
     * regex for finding the hierarchy separator
     * @example:
     *   null - turn off hierarchy
     *   /\// - split by `/`
     *   /\./ - split by `.`
     *   /\/|\./ - split by `/` or `.`
     * @type {Regex}
     */
    hierarchySeparator: /\/|\./,
    /**
     * regex for finding the hierarchy root separator
     * @example:
     *   null - turn off multiple hierarchy roots
     *   /\|/ - split by `|`
     * @type {Regex}
     */
    hierarchyRootSeparator: /\|/,
    /**
     * sidebar tree animations
     * @type {Boolean}
     */
    sidebarAnimations: true,
    /**
     * enable/disable shortcuts
     * @type {Boolean}
     */
    enableShortcuts: false,
    /**
     * show/hide tool bar
     * @type {Boolean}
     */
    isToolshown: true,
    /**
     * theme storybook, see link below
     */
    theme: themes.light
  }
});

// must come last
configure(loadStories, module);

[shilman]

@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…

[VladimirPittner]

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.